Css 中单行及多行文字如何实现水平垂直居中？

本文和大家分享的主要是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

 

 

来源：简书