Question

我想知道将div放在另一个div中的最佳方法是什么。我唯一的限制是.anim需要保持相对！我在下面看到了我现在的代码。谢谢你们！

HTML：

<div class="anim">

         <div class="spacer">
            <p>CONTENT</p>
            <p>more content</p>
        </div>

    </div>

CSS：

.anim {
    position:relative;
    width:75%;
    margin:auto;
    height:50%;
}

.spacer{
    position:absolute;
    height:300px;
    top:0;
    bottom:0;
}

Answer 1

.anim{display:table;}
.spacer {display:table-cell; vertical-align:middle;}

将垂直对齐

Answer 2

一种简单的方法是将.anim div设为固定高度，例如500px。

然后你可以添加一个margin-top：

.anim {
  margin-top: 100px;    // (500 - 300) / 2 = 100
}

demo

Answer 3

根据w3：http://www.w3.org/Style/Examples/007/center.en.html#vertical

CSS级别2没有垂直居中的属性。 CSS级别3可能会有一个。但即使在CSS2中，您也可以通过组合一些属性来垂直居中。诀窍是指定将外部块格式化为表格单元格，因为表格单元格的内容可以垂直居中。

因此代码非常简单

.anim {
    display: table-cell;
    vertical-align: middle;
    height: 200px;
}

这是演示http://jsfiddle.net/AbTxS/

Answer 4

根据您的问题，您似乎想要这样的内容...... div.spacer是垂直居中的，而div.anim仍然是相对的。

div.spacer上边距必须是.spacer高度的负半边。

此解决方案仅适用于.spacer的固定高度。

CSS

.anim {
    position:relative;
    width:75%;
    margin:auto;
    height:800px;
    background:#FF0
}    
.spacer {
    position:absolute;
    top:50%;
    margin:-150px 0 0;
    width:300px;
    height:300px;
    background:red
}

HTML

<div class="anim spacer">
    <p>
        Content
    </p>
    <p>
        More content
    </p>
</div>

需要帮助垂直居中div

4 个答案: