关于display属性中的table-cell属性

display:table-cell实现垂直居中

在做项目时发现一个属性特别好用，可以轻松的实现父元素内的行内元素水平垂直居中，特别是一个p标签由于文字太长而换行，此时需要水平垂直居中，可以将其display属性的值设置为table-cell属性，将父元素的display设置为他table，结合使用vertical-aglin:midddle使其垂直居中，使用text-aglin：center使其水平居中这样达到了水平垂直居中的效果。可通过一下代码实现效果：

<div class="box1">        
<p>这是一个网页这是一个网页这是一个网页</p>    
</div>

 .box1{
    
                
 width: 200px;            
 height: 150px;            
 border: 1px solid darkcyan;        
 }   

没有加入代码前的效果：

修改代码：

 .box1{
    
                
 width: 200px;            
 height: 150px;            
 border: 1px solid darkcyan;            
 display: table;        
 }        
 p{
    
                
 display: table-cell;            
 vertical-align: middle;            
 text-align: center;            
 width: 200px;            
 height: 16px;        
 }

效果图：

这样就实现了水平垂直居中。
一般情况下，我们会使用其行高即line-height的值与父元素的高度相同这样实现垂直居中，用text-aglin实现水平居中，可是当内容太多需要换行时，这种方法就不可用了，这样会使文字溢出的。