一、單行文字
1. line-height、text-align（兼容性ie6/7）
CSS代碼（為了節(jié)省空間，建議不要單行書寫css樣式）
.new{?
height:5em; ?line-height:5em; ?text-align:center; border:1px solid #ddd;
?}
2.display:flex、just-content：center、line-height（不兼容性ie6/7/8/9）
.new{?
display:flex; justify-content:center; ?height:5em; line-height:5em; border:1px solid #ddd;
}
二、多行文字
1. 父元素line-height、子元素 display、vertical-align、line-height（不兼容IE6/7）
.middle-content{
? ? width:80%; height:500px; line-height:500px; text-align:center;?
? ?margin:0 ?auto; ? border:1px solid #000;
}
.middle-context{
display:inline-block; ?vertical-align:middle; line-height:50px;
}
2. 父元素display:table，子元素display:table-cell、 vertical-align:middle;（不兼容IE6/7）
.middle-content{
display:table;
?width:80%; height:500px; ?text-align:center; margin:0auto; border:1px solid#000000;
}
.middle-context{
display:table-cell; vertical-align:middle;
line-height:50px;
}
3. 利用定位及display（兼容IE6/7）
.container{ *position:relative; display:table;?
height:500px; ?border:1px solid#000; width:700px; margin:0auto;
}
.middle-content{
*position:absolute; *top:50%; *left:50%; display:table-cell;vertical-align:middle; text-align:center;
width:100%;
}
.middle-context{
*position:relative; *top:-50%; *left:-50%;
line-height:50px;
}
4.使用空標(biāo)簽
.container{
? ?height:500px; border:1px solid#000; width:500px; margin:0auto; text-align:center;
}
.middle-content{display:inline-block; vertical-align:middle;
*display:inline; *zoom:1;
}
.middle-context{
?line-height:50px;
}
.nothing{
? ?display:inline-block; width:0; height:100%; vertical-align:middle;
}
以上為單行及多行文字水平垂直居中的方法，您有更好的方法可以留言補(bǔ)充；你也可以在我的公眾號(hào)：雨澤竹米，進(jìn)行留言！
?此文為看點(diǎn)（雨澤竹米）原創(chuàng)內(nèi)容，特此聲明！！！
