用CSS实现垂直居中的方法

布局中经常见到垂直居中效果，为实现良好的兼容性，PC端实现实现这一效果的方法一般是通过绝对定位，table-cell，负边距等。CSS让垂直居中的方法更加多样化，接下来介绍几种实现垂直居中的方法：

垂直居中效果：

html代码：

外部div基础CSS样式：

1.绝对定位和负边距

CSS：

2.绝对定位和0的结合

相较于第一种方法这种方法更适合用于移动端开发

3.table-cell方法

注意：此处类名为.box2的div标签是块级元素，需转换成行内元素text-align:center；才能生效

4.display:flex

5.display:flex和margin:auto

6.display:-webkit-box

7.translate

用css3的transform方法来实现的

有需要的可看下，大家有什么更好的方法可在评论区分享