标签：
对于图片在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性能问题觉得问题不大。
标签：
原文地址：http://www.cnblogs.com/pfzeng/p/4469238.html
