【图片垂直居中】解决方案

<i class="i"><img src="http://p1.yokacdn.com/pic/index/121/2009/0318/U112P1T121D14F2761DT20100204144100.jpg" /></i>
.i {display: table-cell;vertical-align:middle; text-align:center;*display: block;*font-size: 175px;*font-family:Arial;200px; height:200px; border: 1px solid #eee; }
.i img { vertical-align:middle;}


注意:此种方法,不能对<i>使用 float:left 属性,会导致垂直居中无效!


注释:
display: table-cell; —— 非IE的主流浏览器识别的垂直居中的方法
text-align:center; —— 设置水平居中
display: block; —— 针对IE的Hack
font-size: 175px; —— 约为高度的0.873,200*0.873 约为175
font-family:Arial; —— 防止非utf-8引起的hack失效问题,如gbk编码
vertical-align:middle; —— 设置图片垂直居中

原文地址:https://www.cnblogs.com/enone/p/1782888.html