---恢复内容开始---
在项目中我们会遇到这种情况，一个div的宽固定，里面的内容长度不定，不管是一行还是多行，都要垂直居中，有俩个实现方法：
1、使用absolute，top：50%，transform: translateY(-50%)
<div class="text">
<p>王企鹅我去二尔特人特瑞特让他热他人</p>
</div>
p{
margin: ;
padding: ;
}
.text{
width: 200px;
height: 100px;
position: relative;
border: 1px solid #00aaee;
}
.text p{
width: 100%; (这个很重要，备注：1)
padding-left: 10px;
padding-right: 10px;
text-align: center;
position: absolute;
top: %;
transform: translateY(-%);
}
缺点：
在内容不足以填满一行的时候会出现下面的问题
这时p设置了width:100%,而且有padding
p设置了padding，没有设置width:100%，就会无法水平居中
所以：实际情况中，如果p没有设置了padding，就可以width:100%，使用absolute。
如果设置了padding,最好可以使用table-cell
2、display:table-cell
<div class="text">
<p>王企鹅我去二尔特人特瑞特让他热他人</p>
</div>
p{
margin: ;
padding: ;
}
.text{
border: 1px solid #00aaee;
display: table-cell;
text-align: center;
width: 200px;
height: 100px;
vertical-align: middle;
}
.text p{
vertical-align: middle;
padding: ;
margin: ;
}
缺点：俩个div都设置了display:table-cell，不能放在一起，不然排版会出问题
如果有俩个紧挨的div都要实现这种效果，可以一个用absolute，一个用table-cell,，或者俩个div都用table-cell，中间可以加一个没有效果的div
---恢复内容结束---