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>