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

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

　　先贴出html代码　

方法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：

.boxBlock{
   width:200px;height:200px;line-height:200px;background:pink;text-align:center;}/* 兼容标准浏览器 */.boxBlock div:before{
       content:"."; /* ???????????? 具体的值与垂直居中无关，尽可能的节省字符 */    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运用空标签方式

.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运用定位方式

 

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

 注意：

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

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

 

总结：

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

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