css中元素水平垂直居中4种方法介绍

　table-cell轻松设置文本图片水平垂直居中

　　让一个元素垂直居中的思路：把这个元素的容器设置为table-cell，也就是具有表格单元格的特性，再使用vertical-align(这个属性对block元素不起作用，但对table-cell元素是有效的)设置元素垂直居中，即可达到我们想要的效果。

　　IE7及以下版本不支持此方法，IE8及以上版本及大部分的主流浏览器都很好的支持。

　　HTML代码

代码如下
<div class="img">     <img src="../images/a-1.jpg" alt="" /> </div> 样式规则 .img{     display:table-cell;     vertical-align:middle;     width:400px; height:500px;     text-align:center;     border:#CCC 1px solid; } /*IE7不支持该方法*/

　　使用相对定位使元素水平和垂直居中

　　利用相对定位使元素水平居中：要求元素有固定的宽度，设置元素的left:50%,这样元素的左边边界线和该元素的父级元素的水平方向的中线重合，设置margin-left,值为负的元素宽度的一半，让元素向左移动半个宽度的位置，就可以使元素水平方向的中线与父级元素的中线重合，即实现了元素的水平居中。

　　举例：让一个容器元素水平居中显示，宽度:960px;

　　width:960px; position:relative; left:50%; margin-left:-480px;

　　上面这段代码和下面的这段代码等价，使用margin:0 auto;让元素居中，被广泛的使用，大家都很熟悉

　　width:960px; margin:0 auto;

　　利用相对定位使元素垂直居中：要求元素有固定的高度，设置元素的top:50%,这样元素的上边边界线和该元素的父级元素的垂直方向的中线重合，设置margin-top,值为负的元素高度的一半，让元素向上移动半个高度的位置，就可以使元素的垂直方向的中线与父级元素的中线重合，即实现了元素的垂直居中。

　　以下是利用相对定位实现元素水平和垂直居中的示例，父级元素.box,该元素占据的空间宽度250px,高度150px;(计算进padding的值)

代码如下
.box{     width:300px;     height:200px;     border:#CCC 1px solid; } .box span{     display:block;     width:240px;     height:140px;         position:relative;     top:50%;     left:50%;     margin:-75px 0 0 -125px;     padding:5px; }

　　示例要实现的效果：让span这个元素在.box中水平垂直居中，首先将span变成一个块级元素，使之水平居中可以使用margin:0 auto;这是我们常用的，在这里，我们使用相对定位来实现。

　　使用line-height让单行文字垂直居中

　　这种方式是我们大家经常用到的，让标题，按钮等的文字垂直居中，IE6/7/8/9/10，FF,Chrome,Safari都支持

　　.

代码如下
box_1{      width:300px;     height:55px;     line-height:55px;     text-align:center;     border:#ccc 1px solid; }

　　使用绝对定位让元素水平垂直居中

代码如下
.box_2{     width:300px;     height:200px;     border:#CCC 1px solid;     position:relative;     top:0;     left:0; } .box_2 span{     display: block;     width:240px;     height:140px;     position:absolute;     top:0;     bottom:0;     left:0;     right:0;     margin:auto;         padding:5px; } /*IE7不支持,移动端的网页开发可以使用这种方式*/