适合文本使用，子元素的line-height跟父元素的height一样即可
1.1 代码 <style> .div1 { width: 400px; height: 100px; background-color: blue; } p { line-height: 100px; }</style><body><div class="div1"> <p>使用line-height实现垂直居中</p></div> 1.2效果图 2. 使用relative相对定位居中子元素使用相对定位 position: relative;top: 40%;，这个40%是这么来的呢？因为相对定位是根据元素的头去定位的。计算方式:（容器高度-元素自身高度）/2。（不建议使用）
2.1 代码 <style> .div2 { width: 400px; height: 100px; background-color: green; } .div2>p { position: relative; top: 40%; }</style><body><div class="div2"> <p>relative相对定位居中</p></div></body> 2.2 效果图 3. 使用absolute绝对定位居中第三种方式跟第二种的差不多，不同的是这次使用了top: 50%; ，然后使用负值的margin解决定位差距，margin-top: -10.5px;为子元素自身高度的一半.最后注意子元素使用position: absolute;绝对布局时，要先设置父元素的position: relative为相对定位。（不建议使用，需要自己计算子元素的高度）
3.1 代码 <style>} .div3 { width: 400px; height: 100px; background-color: yellow; position: relative; } .div3 > p { position: absolute; top: 50%; margin-top: -10.5px; }</style><body><div class="div3"> <p>relative相对定位居中</p></div></body> 3.2 效果图 4. absolute+margin实现垂直居中利用绝对定位top: 0;left: 0;bottom: 0;right: 0;这样子元素元素就会充满整个容器，这时候使用margin: auto 0;就能使元素居中啦。这个记得给这个元素设定高度哦。
4.1代码 <style> .div4 { width: 400px; height: 100px; background-color: plum; position: relative; } .div4 > p { position: absolute; top: 0; left: 0; bottom: 0; right: 0; margin: auto 0; height: 21px; }</style><body><div class="div4"> <p>absolute+margin实现垂直居中</p></div></body>4.2 效果图
第五种没什么好解释的，记住这两句代码就完事了display: table-cell;vertical-align: middle;
5.1 代码 <style> .div5 { width: 400px; height: 100px; background-color: pink; display: table-cell; vertical-align: middle; } .div5 > p { /* nothing to do */ }</style><body><div class="div5"> <p>table-cell实现垂直居中</p></div></body> 5.2 效果图 6. flex实现垂直居中(1)第六种挺简单的,父元素设置display: flex;，然后子元素使用margin:auto 0;就可以实现居中了。
6.1 代码 <style> .div6 { width: 400px; height: 100px; background-color: cadetblue; display: flex; } .div6 > p { margin: auto 0; }</style><body><div class="div6"> <p>flex实现垂直居中(1)</p></div></body> 6.2 效果图 7. flex实现垂直居中(2)同样是父元素设置display: flex;，这次子元素使用align-self: center;就可以实现居中了。
7.1 代码 <style> .div7 { width: 400px; height: 100px; background-color: darkcyan; display: flex; } .div7 > p { align-self: center; }</style><body><div class="div7"> <p>flex实现垂直居中(2)</p></div></body> 7.2 效果图 8. flex实现垂直居中(3)这次父元素直接使用display: flex; +align-items: center;直接控制子元素垂直居中
8.3 代码 <style> .div8 { width: 400px; height: 100px; background-color: darkcyan; display: flex; } .div8 > p { /* nothing to do */ }</style><body><div class="div8"> <p>flex实现垂直居中(2)</p></div></body> 8.2 效果图css实现垂直居中的方法还有很多很多,我一般都是使用第八种，你们呢？欢迎在评论区留言(＾Ｕ＾)ノ~ＹＯ