HTML中实现多文本垂直居中的方法

HTML中实现多文本垂直居中的方法

方法一：父元素使用display:table和子元素使用display:table-cell属性来模拟表格 子元素设置vertical-align:middle即可垂直居中

<div class="box table">   
<span class="span">      
方法一：父元素使用display:table和子元素使用display:table-cell属性来模拟表格        
子元素设置vertical-align:middle即可垂直居中   
</span>

.box{    width: 300px;    
         height: 300px;    
         margin-top: 20px;    
         background-color: gray;
                      }
.table{    
display: table;
}
.span {    
display: table-cell;    
vertical-align: middle;
}

**方法二：对子元素设置display:inline-block属性，使其转化成行内块元素，模拟成单行文本。父元素设置对应的height和line-height。对子元素设置vertical-align:middle属性，使其基线对齐。添加line-height属性，覆盖继承自父元素的行高。注意：文本的高度不能超过外部盒子的高度。**

<div class="p_box bg_box">    
<p class="p">        
方法二：对子元素设置display:inline-block属性，使其转化成行内块元素，模拟成单行文本。        父元素设置对应的height和line-height。对子元素设置vertical-align:middle属性，使其基线对齐添加line-height属性，覆盖继承自父元素的行高。缺点：文本的高度不能超过外部盒子的高度。    
</p>
</div>

.bg_box {    width: 300px;    
height: 300px;    
margin-top: 20px;    
background-color:gray;
}
/*方法二*/
.p_box {    line-height: 300px;}
.p {    display: inline-block;    
line-height: 20px;  /*单独给子元素设置行高，覆盖父级元素的行高*/    
vertical-align: middle;  /*基线居中对齐*/}