如何在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>
​