纯css实现全兼容的元素水平垂直居中

　　对于图片在box内水平居中的问题，在项目中肯定是会经常碰到的。

　　这是我目前知道的几种解决方法

　　先贴出html代码　

<div class="boxBlock">
    <img src="http://skin.huitu.com/images/noface.gif" alt="" />
</div>

方法1：

.boxBlock{width:200px;height:200px;vertical-align:middle;display:table-cell;background:pink;text-align:center;*font-size:174px;*display:block;}/*约为高度的0.873，200*0.873*/
.boxBlock img{_width:expression(this.width >114? '114px':true);max-width:114px;_height:expression(this.height >114? '114px':true);max-height:114px;}

亲测，ie6以上，标准浏览器全支持。

标准浏览器是利用display模拟表格垂直居中特性实现。ie老版本浏览器竟然可以用font-size实现。还要设置width属性和height属性。

当然，在.boxBlock中如果设置了浮动，则垂直居中失效。解决方法很简单，在外面包一层div即可。外面浮动，里面不浮动。

 

方法2：

<div class="boxBlock">
    <div>
         <img src="http://skin.huitu.com/images/noface.gif" alt="" />
    </div>
</div>

.boxBlock{width:200px;height:200px;line-height:200px;background:pink;text-align:center;}
/* 兼容标准浏览器 */
.boxBlock div:before{
    content:"."; /* <a href="http://casinogreece.gr/">????????????</a> 具体的值与垂直居中无关，尽可能的节省字符 */
    margin-left:-15px; font-size:10px; /* 修复居中的小BUG */
    visibility:hidden; /*设置成隐藏元素*/
}
/*兼容ie6,7*/
.boxBlock div img{
    *margin-top:expression((200 - this.height )/2); /* CSS表达式用来兼容IE6/IE7 */
    vertical-align:middle;
    border:1px solid #ccc;
}

亲测，兼容ie6以上以及标准浏览器。对于标准浏览器，也是神奇的运用:before

 

方法3：标准浏览器运用display:table-cell，vertical-align: middle方式。ie6,7运用空标签方式

<div class="boxBlock mr20">
    <div>
        <i></i><img src="http://skin.huitu.com/images/noface.gif" alt="" />
    </div>
</div>

.boxBlock{width:200px;height:200px;line-height:200px;background:pink;text-align:center;vertical-align:middle;display:table-cell;}
.boxBlock i {
    display:inline-block;
    height:100%;
    vertical-align:middle
    }
.boxBlock img{vertical-align:middle}

亲测，兼容ie6以上及标准浏览器。ie6，7是运用空标签形式

 

方法4：标准浏览器运用display:table-cell，ie6,7运用定位方式

<div class="boxBlock mr20">
    <div>
        <img src="http://skin.huitu.com/images/noface.gif" alt="" />
    </div>
</div>

<style type="text/css">
.boxBlock{
    width:500px;height:400px;
    display:table;
    text-align:center;
    border:1px solid #d3d3d3;background:#fff;
}
.boxBlock div{
    display:table-cell;
    vertical-align:middle;
}
.boxBlock img{
    border:1px solid #ccc;
}
</style>
<!--[if lte IE 7]>
<style type="text/css">
.boxBlock{
    position:relative;
    overflow:hidden;
}
.boxBlock div{
    position:absolute;
    left:50%;top:50%;
}
.boxBlock img{
    position:relative;
    left:-50%;top:-50%;
}
</style>
<![endif]-->

 

亲测，兼容ie6以上及标准浏览器。ie6，7是定位实现。

 注意：

1，box中必须为img等display为inline的标签

2，对于多行文字垂直居中问题，方法4适用

 

总结：

对于标准浏览器，设置display：table-cell; vertical-align:middle 方式实现最简单。方法二中的:before。个人觉得比较怪异。弃之。

对于低版本ie浏览器，看个人喜好而定。我喜欢不加标签的方式，运用css表达式实现。ie6,7性能问题觉得问题不大。