如何使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

以上为单行及多行文字水平垂直居中的方法，您有更好的方法可以留言补充；你也可以在我的公众号：雨泽竹米，进行留言！

公众号

 此文为看点（雨泽竹米）原创内容，特此声明！！！