本文和大家分享的主要是css中单行及多行文字水平垂直居中相关内容，一起来看看吧，希望对大家学习css有所帮助。
一、单行文字
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
来源：简书