如何使用垂直對齊：中間

Question

直播：http://jsfiddle.net/8hAv3/

#main { 
    width: 100px; 
    height: 100px; 
    background-color: red; 
} 
#sub { 
    width: 100%; 
    height: 100%; 
    background-color: blue; 
    vertical-align: middle; 
} 

<div id="main"> 
    <div id="sub">TEXT</div> 
</div> 

在這個例子中，爲什麼垂直對齊不工作？我怎樣才能做到這一點？我不想使用邊距，填充和設置像素高度。這可能嗎？

Answer 1

這應該工作：

#main { 
    width: 100px; 
    height: 100px; 
    background-color: red; 
    display: table; 
} 
#sub { 
    display: table-cell; 
    height: 100%; 
    width: 100%; 
    background-color: blue; 
    vertical-align: middle; 
} 

http://jsfiddle.net/8hAv3/2/

Answer 2

，如果你只是想在一個固定的高度盒垂直居中的文字，我會用line-height:100px做

Answer 3

你必須使用一個

display:table-row; 
display:table-cell; or 
display:table; 

與垂直對齊風格一起，不知道它必須是確切的顯示值，但它需要是table之一。

Answer 4

您需要在主容器上使用display:table，並在子容器上使用display:table-cell。插圖如下：http://jsfiddle.net/8hAv3/1/

Answer 5

您必須給元素#sub一個行高，否則瀏覽器不知道垂直對齊的高度。

Answer 6

只要給DIV一個line-height。

#main { 
    width: 100px; 
    height: 100px; 
    background-color: red; 
} 
#sub { 
    width: 100%; 
    height: 100%; 
    background-color: blue; 
    line-height:100px; 
} 

Fiddle

此解決方案不使用display:table和display:table-cell爲display:table和display:table-cell不是瀏覽器友好的，一些較舊的瀏覽器不支持的