html - 居中一个固定的表格显示 div，不设置宽度

Question

我有一个显示消息的 div，我希望它固定在屏幕的顶部中心，边框应该只围绕文本(而不是屏幕的整个宽度)并且宽度是可变的(取决于消息的字符串长度)。这可能吗？我尝试了很多方法但没有成功。这是我最新的 jsFiddle .感谢阅读。

div{
    text-align:center;
    display:table;
    position:fixed;
    left:0;
    right:0;
    margin:auto;
    border:1px solid grey;
} 

Answer 1

是的，这是可能的。有一些可能的解决方案，所以让我向您介绍一下:

CSS 二维变换

我个人推荐此解决方案，因为它的警告最少，并且享有几乎完整的跨浏览器支持(关于我们今天看到的浏览器共享统计数据)。

删除 right 属性并设置 left: 50%。为了补偿元素自身的宽度，我们再次通过 CSS 2D 平移沿 x 轴向左移动它。此解决方案依赖于 browser support for CSS 2D transforms ，它的传播非常广泛——唯一不支持它的浏览器是 Opera Mini 和 IE ≤8。

有些属性您实际上并不需要:

• 右:0
• 边距:自动

p/s: 因为你想让它在页面的顶部，我相信你忘了在你的 CSS 中添加 top: 0。

    div {
        text-align:center;
        position:fixed;
        top: 0;
        left: 50%;
        border:1px solid grey;
        -webkit-transform: translateX(-50%);
        -ms-transform: translateX(-50%);
        -o-transform: translateX(-50%);
        transform: translateX(-50%);
    }

<div class="center">variable string</div>

---

行内 block

如果您真的必须支持 IE ≤8，您将不得不依赖于使用 inline-block。我个人不赞成这种解决方案，因为它会为您的标记添加不必要的嵌套级别，这仅用于风格目的。

div.center {
  text-align: center;
  position: fixed;
  top: 0;
  width: 100%;
}
div.center > div {
  border:1px solid grey;
  display: inline-block;
}

<link href="http://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.css" rel="stylesheet"/>
<div class="center"><div>variable string</div></div>