1. 使用line-height实现垂直居中

适合文本使用，子元素的line-height跟父元素的height一样即可

1.1 代码

1.2效果图

2. 使用relative相对定位居中

子元素使用相对定位 position: relative;top: 40%;，这个40%是这么来的呢？因为相对定位是根据元素的头去定位的。计算方式:（容器高度-元素自身高度）/2。（不建议使用）

2.1 代码

2.2 效果图

3. 使用absolute绝对定位居中

第三种方式跟第二种的差不多，不同的是这次使用了top: 50%; ，然后使用负值的margin解决定位差距，margin-top: -10.5px;为子元素自身高度的一半.最后注意子元素使用position: absolute;绝对布局时，要先设置父元素的position: relative为相对定位。（不建议使用，需要自己计算子元素的高度）

3.1 代码

3.2 效果图

4. absolute+margin实现垂直居中

利用绝对定位top: 0;left: 0;bottom: 0;right: 0;这样子元素元素就会充满整个容器，这时候使用margin: auto 0;就能使元素居中啦。这个记得给这个元素设定高度哦。

4.1代码

4.2 效果图

5. 使用table-cell实现垂直居中

第五种没什么好解释的，记住这两句代码就完事了display: table-cell;vertical-align: middle;

5.1 代码

5.2 效果图

6. flex实现垂直居中(1)

第六种挺简单的,父元素设置display: flex;，然后子元素使用margin:auto 0;就可以实现居中了。

6.1 代码

6.2 效果图

7. flex实现垂直居中(2)

同样是父元素设置display: flex;，这次子元素使用align-self: center;就可以实现居中了。

7.1 代码

7.2 效果图

8. flex实现垂直居中(3)

这次父元素直接使用display: flex; +align-items: center;直接控制子元素垂直居中

8.3 代码

8.2 效果图

css实现垂直居中的方法还有很多很多,我一般都是使用第八种，你们呢？欢迎在评论区留言(＾Ｕ＾)ノ~ＹＯ