如何在div中垂直对齐div？

Question

可以用margin: 0 auto;水平将一个div元素与另一个div元素对齐margin: 0 auto; 只要它们都具有除auto以外的宽度属性，但这不适用于垂直对齐。

如何在另一个div中垂直对齐div？

Answer 1

基于各种想法，有很多不同的方法。 鉴于元素具有固定的高度（以px，％或您所拥有的高度），到目前为止，我发现的最佳解决方案是基于以下原理：

给出父div position: relative; 子div position: absolute; ，以使孩子绝对相对于父母定位。

对于孩子，将top ， bottom ， left和right为0 。 假设孩子的width和height都小于父对象的大小，这将使浏览器陷入不可能的境地。

margin: auto; 作为浏览器的救星。 现在，浏览器可以在所有面上添加足够的边距，以使子元素保持其大小，但仍需通过将top ， bottom ， left和right设置为0来强制填充整个父元素。

TADAAA！ 元素在父级中垂直和水平对齐。

标记

<div class="parent">
    <div class="child"></div>
</div>

的CSS

​.parent {
    width: 200px;
    height: 200px;
    position: relative;
}

.child {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    width: 100px;
    height: 100px;
}

一个有效的例子

http://jsfiddle.net/sg3Gw/

Answer 2

我发现最容易使用display:table-cell; vertical-align:middle; display:table-cell; vertical-align:middle; 这是一个jsfiddle

<style>
.a {
    border:1px solid red;
    width:400px;
    height:300px;
    display:table-cell;
    vertical-align:middle;
}
</style>
<div class="a">
    <div>CENTERED</div>
</div>
​