Question

好的，所以我试图将div放在动态内容中（宽度和高度都未知因为文本占用了未知空间并包裹了未知数量的行）。

每this post，我设法将div水平居中。

然而，当我将相同的原理应用于垂直居中时，该块仅向下移动50％（并且根本不会向上移动）。

我在这里问我的问题： 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;
}

小提琴：http://jsfiddle.net/nMqJG/25/

Answer 2

您需要考虑％宽度和％高度：

.wrapper{
    border:1px solid #F00;
    width:200px;
    height:200px;
    position:relative;
}

.in{
    float:left;
    width:100px;
    height:100px;   
    margin:25%;
    display:inline-block;
    border:1px solid #00F;    
}

<div class="wrapper">

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

</div>

如果您使用固定像素宽度，那么您将需要根据空间限制考虑％边距将如何影响内部div。

例如，您有一个200x200的容器，内部DIV为100x100。因此，如果您将内部距离外部移动25％，则移动200 * .25 =（50px）。 50 + 100 + 50是200，它的内部div位于四周。

Answer 3

这对你有用吗？（借用代码并从其他答案调整）

.wrapper{
    border:1px solid #F00;
    width:200px;
    height:200px;
    position:absolute;
}

.in{
    left: 25%;
    right: 25%;
    top: 25%;
    bottom: 25%;
    position: absolute;
    display:inline-block;
    border:1px solid #00F;    
}

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

在所有顶部/左侧/底部/下侧使用绝对定位和25％应使您的内部div正好位于中间，无论页面上的包装尺寸或位置如何。

垂直定心绝对定位块

编辑：仅供参考，我使用的是FF10.0.2

3 个答案: