用七种方式实现垂直居中

如果父元素.parent 的 height 不写，只需要 padding: 10px 0; 就能将 .child 垂直居中；

如果 .parent 的 height 写死了，就很难把 .child 居中，以下是垂直居中的方法：

1. table自带功能

利用table的特性，代码如下：

点击查看实现效果

2.div装成table

给div加一些CSS把它变成table：

点击查看实现效果

3.100% 高度的 afrer before 加上 inline block

通过给div加两个span标签，高度100%

点击查看实现效果和优化版本

4.margin-top -50%

代码如下

点击查看实现效果

5.translate -50%

代码如下

点击查看实现效果

6.absolute margin auto

代码如下

点击查看实现效果

7.flex布局

点击查看实现效果