CSS實現垂直居中的4種思路

以前一直認為單行文字垂直居中要將高度和行高設定成相同的值，但高度其實沒必要設定。實際上，文字本身就在一行中居中顯示。在不設定高度的情況下，行高撐開高度。

.test
style>
class="test">測試文字div>

設定父元素的display為table-cell

通過為table-cell元素設定vertical-align:middle，可使其子元素均實現垂直居中。這和**裡單元格的垂直居中是類似的

[注意] 若要ie7-瀏覽器支援，則可以將其改為**結構

[注意] 設定為table-cell的div不能使用浮動或絕對定位，因為浮動或絕對定位會使元素具有塊級元素特性，從而喪失了table-cell元素具有的垂直對齊的功能。

若需要浮動或絕對定位處理，則需要外面再套一層div。

.parent
style>
class="parent"
style="background-color: gray;height: 100px;">
class="child"
style="background-color: lightblue;">我是有點長的有點長的有點長的有點長的測試文字div>
div>

若子元素是，通過設定父元素的行高來代替高度，且設定父元素的font-size為0。

vertical-align:middle的解釋是元素的中垂點與父元素的基線加1/2 父元素中字母x的高度對齊。由於字元x在em框中並不是垂直居中的，且各個字型的字元x的高低位置不一致。

所以，當字型大小較大時，這種差異就更明顯。當 font-size為0時，相當於把字元x的字型大小設定為0，於是可以實現完全的垂直居中。

.parent
.child
style>
class="parent"
style="background-color: lightgray;width:200px;">
class="child"
src=""
width="50%"
alt="test">
div>

通過新增元素來實現垂直居中的效果

新增元素設定高度為父級高度，寬度為0，且同樣設定垂直居中vertical- align:middle的inline-block元素。由於兩個元素之間空白被解析，所以需要在父級設定font-size:0，在子級再將 font-size設定為所需值；若結構要求不嚴格，則可以將兩個元素一行顯示，則不需要設定font-size:0。

.parent
.child
.childsbling
style>
class="parent"
style="background-color: lightgray; width:200px;">
class="child"
style="background-color: lightblue;">我是比較長的比較長的多行文字div>
class="childsbling">
i>
div>

若子元素不定高，使用top50%配合translatey(-50%)可實現居中效果。translate函式的百分比是相對於自身高度的，所以top:50%配合translatey(-50%)可實現居中效果。

[注意] ie9-瀏覽器不支援；

[注意]若子元素的高度已知，translate()函式也可替換為margin-top: 負的高度值。

.parent
.child
style>
class="parent"
style="background-color: lightgray; height:100px;">
class="child"
style="background-color: lightblue;">測試文字div>
div>

若子元素定高，結合絕對定位的盒模型屬性，實現居中效果

.parent
.child
style>
class="parent"
style="background-color: lightgray; height:100px;">
class="child"
style="background-color: lightblue;">測試文字div>
div>

《關於增加div層級的說明》在水平居中對齊中，元素外層套一層div並設定absolute，元素設定負margin-left或者relative的負left屬性，可以實現水平居中的效果。但由於margin是相對於包含塊寬度的，這樣margin-top:-50%得到的是寬度而不是高度的-50%，所以不可行；對於relative的百分比取值而言，在包含塊高度為auto的情況下，chrome、safari和ie8+瀏覽器都不支援設定元素的百分比top值，所以也不可行。

[注意] ie9-瀏覽器不支援

在伸縮容器上設定側軸對齊方式align-items: center

.parent
style>
class="parent"
style="background-color: gray; height: 100px;">
class="child"
style="background-color: lightblue;">測試文字div>
div>

在伸縮專案上設定margin: auto 0

.parent
.child
style>
class="parent"
style="background-color: gray; height: 100px;">
class="child"
style="background-color: lightblue;">測試文字div>
div>

CSS實現垂直居中的4種思路

CSS實現垂直居中的4種思路詳解

CSS實現水平垂直同時居中的6種思路

5種實現垂直居中css

CSS實現垂直居中的4種思路

CSS實現垂直居中的4種思路詳解

CSS實現水平垂直同時居中的6種思路

5種實現垂直居中css

相關推薦