一、单行文字
1. line-height、text-align（兼容性ie6/7）
CSS代码（为了节省空间，建议不要单行书写css样式）
.new{
height:5em; line-height:5em; text-align:center; border:1px solid #ddd;
}
css及html
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;
}
css及html
二、多行文字
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;
}
ie6及ie7不支持
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;
}
ie及ie7不兼容
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;
}
兼容ie6/ie7
4.使用空标签
.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;
}
兼容ie6/7
以上为单行及多行文字水平垂直居中的方法，您有更好的方法可以留言补充；你也可以在我的公众号：雨泽竹米，进行留言！
公众号
此文为看点（雨泽竹米）原创内容，特此声明！！！
网友评论