html - 垂直定心绝对定位 block

Question

好的，所以我尝试将动态内容居中放置(它的宽度和高度都是未知的，因为文本占用了未知的空间并换行了未知数量的行)。

根据 this post , 我设法使 div 水平居中。

然而，当我将相同的原则应用于垂直居中时， block 仅向下移动 50%(并且根本不会向上移动)。

我的问题在这里的 JSFiddle: http://jsfiddle.net/nMqJG/2/ ;如您所见，它是水平居中但不是垂直居中...

谢谢，感谢任何帮助，

编辑:仅供引用，我使用的是 FF10.0.2

Answer 1

如果您不需要支持旧浏览器，请使用display: table-cell。 Details here

HTML:

<div class="wrapper">
    <div class="in">
        DYNAMIC CONTENT DYNAMIC CONTENT DYNAMIC CONTENT DYNAMIC CONTENT
    </div>
</div>

CSS:

.wrapper{
    border:1px solid #F00;
    width:200px;
    height:200px;
    display: table-cell;
    vertical-align: middle        
}

.in{
    border:1px solid #00F;
}

fiddle :http://jsfiddle.net/nMqJG/25/