如何垂直對齊div中的div？

Question

水平對齊另一個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;這裏有一個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> 
​