文本垂直居中实现方法

  大家都知道css中使文本等元素水平居中的最常用的方法就是设置父盒子text-align: center;子盒子margin: 0 auto; 即可；而目前垂直居中没有看到说明最常用的做法，现在我们给出实现元素垂直居中的几个方法；

1. 方法一：line-height;
     这应该是我目前知道实现垂直居中最简单实用的方法；对于只有单行文字的，可使用该方法实现文本垂直居中；只需要在父容器中设置linline-height与height相等即可：

.parent-box{height: 200px;line-height: 200px;text-align: center;background-color:rgb(180, 226, 211);}

2. 方法二：flex
     设置文本所在的父容器为flex布局，然后设置flex-direction为垂直即可实现文本或者子盒子垂直居中；除此之外，flex布局还可灵活应用于多种对齐方式，详见felx布局详解

.parent-box{width: 500px;height: 500px;text-align: center;background-color:rgb(180, 226, 211)；display: flex;flex-direction: column;justify-content: center;}

3. 方法三： 表格布局
     设置display:table-cell 和 vertical-align:middle；这种现实方式可以让标签元素以表格单元格的形式呈现，标签就像 table 中的 td，这样一来我们就可以通过vertical-align:middle这个样式使得其内部的元素居中显示。

.parent-box{width: 500px;height: 500px;text-align: center;background-color:rgb(180, 226, 211);display: table-cell;vertical-align: middle;}

  以上几个方法都是通过css属性使得元素居中，还可以选择稍微麻烦一点的方法，通过计算之后再设置margin或者padding调整为垂直居中；如果还有其他方法，欢迎大家赐教，一起学习。