CSS垂直居中的7个方法：

1.使用flex布局（最优）

仅需3行代码！

2.设置行高line-height

适用于“单行”的“行内元素”（inline、inline-block），将line-height设成和高度一样的数值。

3.借助伪元素

利用::before和::after添加div进到杠杠内，让这个“伪”div的高度100%，就可以轻松地让其他的div都居中。不过div记得要把display设为inline-block，毕竟vertical-align:middle；是针对行内元素，div本身是block，所以必须要做更改！

4.calc动态计算（不推荐）

5.使用表格或假装表格（不推荐）

6.借助transform

利用transform里头的translateY（改变垂直的位移，如果使用百分比为单位，则是以元素本身的长宽为基准），搭配元素本身的top属性，就可以做出垂直居中的效果，比较需要注意的地方是，子元素必须要加上position:relative。

7.借助绝对定位

将上下左右的数值都设为0，再搭配一个margin:auto，就可以办到垂直居中，不过要特别注意的是，设定绝对定位的子元素，其父元素的position必须要指定为relative喔！而且绝对定位的元素是会互相覆盖的，所以如果内容元素较多，可能就会有些问题。