伪元素实现图片水平垂直居中

IE6/IE7不支持伪元素，使用font-size调整(需细调,受中英文字体影响)

样式：

.wrap{border:1px solid #000;width:200px;height:200px;text-align:center;font-size:175px;}.wrap img{vertical-align:middle;}.wrap:after{content:"";display:inline-block;height:100%;width:0;vertical-align:middle;}

HTML代码：

<div class="wrap"><img src="http://hi.csdn.net/attachment/201106/21/0_1308631947O4oo.gif" alt="" title="" width="100" /></div>

 

参考资料：

CSS森林：内容垂直居中

怿飞：图片垂直居中的使用技巧

 张鑫旭：:after伪类+content内容生成经典应用举例