css中元素垂直居中对齐的几种方式

1. table td 居中对齐

使用table布局，利用table td元素的vertical-align来实现垂直居中
优点：兼容性好，ie8+都支持
要点：改变需要垂直居中的元素的父元素的display，设为table-cell即可
注意：设为table-cell的父元素会受其父元素的布局影响，具体使用时，请根据情况看是否要使用额外的包裹元素以消除影响

/* css */
.table-cell {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
  height: 200px;
  width: 200px;
  background: grey;
}
.block {
  display: inline-block;
  width: 100px;
  height: 100px;
  background: white;
}
<!-- html -->
<div class="table-cell">
  <div class="block">要居中的元素</div>
</div>

2. line-height 垂直居中

利用line-height设置父元素行高和子元素的vertical-align: middle配合来实现垂直居中
优点：兼容性好
要点：父元素设置line-height和其高度一样，子元素（要垂直居中的那个）设置其vertical-align: middle
注意：父元素的font-size须设为0。由于我们的子元素是换行写的，所以子元素之前会存在换行符，如果不把父元素的font-size设为0，换行符（文本元素）会有一定的高度，我们要垂直居中的元素就不能真正居中了

/* css */
.line-height {
  position: relative;
  display: block;
  width: 200px;
  height: 200px;
  line-height: 200px;
  text-align: center;
  background: grey;
  font-size: 0;
}
<!-- html -->
<div class="line-height">
  <div class="block"></div>
</div>

3. transform垂直居中

使用css3的transfrom对元素进行平移，配合元素的top、left即可实现垂直居中。
要点：父元素需要设置position: relative，子元素position:absolute/relative。
注意：父元素必须设置position，这样子元素才能相对定位；还有不兼容ie8。

/* css */
.transform {
  position: relative;
  width: 200px;
  height: 200px;
}
.transform-block {
  position: relative;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
<!-- html -->
<div class="transform">
  <div class="block transform-block"></div>
</div>

4. flex布局垂直居中

使用flex布局，可方便快捷的实现垂直居中，只需要在父元素上设置display:flex; align-items: center即可实现
注意：flex在pc端的除了ie家族，都支持的挺好，ie10+可使用flex布局，不过可能需要-ms-前缀。
想要系统的了解flex布局，可阅读这篇文章。

.flex {
   display: flex;
   width: 200px;
   height: 200px;
   align-items: center;
   justify-content: center;
 }
 <div class="flex">
   <div class="block"></div>
 </div>

5.grid布局垂直居中

使用grid布局也可实现垂直居中
注意：grid布局为二维布局，有行和列之分，grid布局较为复杂，且兼容性不是太好，ie家族基本不支持，如果有兴趣，可以去这里详细学习一下。

.grid {
   display: grid;
   width: 200px;
   height: 200px;
   grid-template-columns: 1fr;
   grid-template-rows: 1fr;
   justify-items: center;
   align-items: center;
 }
 <div class="grid">
  <div class="block"></div>
 </div>

目前仅罗列了这5种方法，其实还有很多其他方法，比如使用padding也可以实现垂直居中，前提是子元素定宽定高。罗列的5种方法种，line-height、transform还有flex是使用最多的。现阶段ie市场份额越来越少，其实可以不用兼容ie低版本，这时基本上使用flex布局就可以方便快捷的实现我们想要的很多布局了。