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

行高line-height實現單行文本垂直居中

之前一直認爲單行文本垂直居中要將高度和行高設置成相同的值，但高度其實不必設置。實際上，文本自己就在一行中居中顯示。在不設置高度的狀況下，行高撐開高度。

<style>
.test{
    line-height: 50px;
    background-color: lightblue;
}    
</style>

<div class="test">測試文字</div>

---

設置vertical-align:middle實現垂直居中

【1】設置父元素的display爲table-cell

經過爲table-cell元素設置vertical-align:middle，可以使其子元素均實現垂直居中。這和表格裏單元格的垂直居中是相似的

[注意] 若要IE7-瀏覽器支持，則能夠將其改成<table>表格結構

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

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

<style>
.parent{
  display: table-cell;
  vertical-align: middle;
}
</style>
<div class="parent" style="background-color: gray;height: 100px;">
    <div class="child" style="background-color: lightblue;">我是有點長的有點長的有點長的有點長的測試文字</div>   
</div>

【2】若子元素是圖片，經過設置父元素的行高來代替高度，且設置父元素的font-size爲0。

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

因此，當字體大小較大時，這種差別就更明顯。當 font-size爲0時，至關於把字符X的字體大小設置爲0，因而能夠實現徹底的垂直居中。

<style>
.parent{
  line-height: 100px;
  font-size: 0;
}
.child{
  vertical-align: middle;
}
</style>
<div class="parent" style="background-color: lightgray;width:200px;">
  <img class="child" src="http://sandbox.runjs.cn/uploads/rs/26/ddzmgynp/img1.gif" width="50%" alt="test">  
</div>

【3】經過新增元素來實現垂直居中的效果

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

<style>
.parent{
  height: 100px;
  font-size: 0;
}
.child{
  display: inline-block;
  font-size: 20px;
  vertical-align: middle;
}
.childSbling{
  display: inline-block;
  height: 100%;
  vertical-align: middle;
}
</style>
<div class="parent" style="background-color: lightgray; width:200px;">
  <div class="child" style="background-color: lightblue;">我是比較長的比較長的多行文字</div>
  <i class="childSbling"></i> 
</div>

---

思路三：經過絕對定位實現垂直居中

【1】若子元素不定高， 使用top50%配合translateY(-50%)可實現居中效果。
translate函數的百分比是相對於自身高度的，因此top:50%配合translateY(-50%)可實現居中效果。

[注意]IE9-瀏覽器不支持；

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

<style>
.parent{
  position:relative;
}
.child{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}
</style>
<div class="parent" style="background-color: lightgray; height:100px;">
  <div class="child" style="background-color: lightblue;">測試文字</div>
</div>

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

<style>
.parent{
  position: relative;
}
.child{
 position: absolute;
 top: 0;
 bottom: 0;
 margin: auto 0;
 height: 50px;
}
</style>
<div class="parent" style="background-color: lightgray; height:100px;">
  <div 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值，因此也不可行。

---

思路四：使用彈性盒模型flex實現垂直居中

[注意] IE9-瀏覽器不支持

【1】在伸縮容器上設置側軸對齊方式align-items: center

<style>
.parent{
  display: flex;
  align-items: center;
}
</style>
<div class="parent" style="background-color: gray; height: 100px;">
    <div class="child" style="background-color: lightblue;">測試文字</div>   
</div>

【2】在伸縮項目上設置margin: auto 0

<style>
.parent{
  display: flex;
}
.child{
  margin: auto 0;
}
</style>
<div class="parent" style="background-color: gray; height: 100px;">
    <div class="child" style="background-color: lightblue;">測試文字</div>   
</div>