line-height实现
原理
inline-block对外表现为行内元素，对内表现为块级元素。
line-height可使块级元素中的行内元素垂直居中。
text-align可设置块级元素中的行内元素水平对齐方式。
优点
兼容性好
缺点
父元素高度要确定。
line-height、text-align会被其他兄弟元素继承。
transform实现
原理
使用固定或绝对定位会使元素脱离文档流。
transform属性的值为百分比时，其计算时以自身为基准。
优点
可实现宽高未知或可变元素的垂直水平居中。
缺点
transform为css3的属性，IE8以下不兼容。
要写css前缀。
负margin实现
原理
使用固定或绝对定位会使元素脱离文档流。
margin设置为负值时，元素会相对于当前位置向指定位置偏移。
优点
兼容性好。
流行（额，如果这也算的话）。
缺点
目标元素宽高都要确定。
需要计算margin的取值。
自适应margin实现
原理
超脱三界之外，不在五行之中。
优点
兼容较好。
可实现宽高未知或可变元素的垂直水平居中。
缺点
已经逆天了(⊙o⊙)。
flexbox实现
原理
新的布局理念,弹性布局。
优点
方便直观，快捷干净。
缺点
兼容性差。
要写-webkit-前缀。
float、clear和vertical-align属性将失效。
css table实现
原理
使用css可将布局定义为远古的table布局方式，但又避免了该布局的弊端。
inline-block对外表现为行内元素，对内表现为块级元素。
text-align可设置块级元素中的行内元素水平对齐方式。
优点
兼容性较好。
缺点
text-align会被其他兄弟元素继承。
何莹亮原创技术文章，转载请注明出处：https://heyingliang.github.io/mark/2018/02/26/vertical-center/