实现div里的内容垂直居中

---恢复内容开始---

在项目中我们会遇到这种情况，一个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

---恢复内容结束---