共计 539 个字符，预计需要花费 2 分钟才能阅读完成。
div 相对与 table 对于图片的垂直居中支持的并不好, 特别对于不同浏览器的兼容性来说, 这里我们看下一个简洁的 css 解决方法:
难点在于两点：
垂直居中；
图片是个置换元素，有些特殊的特性。
至于如何解决，下面是一个权衡的相对结构干净，css 简单的解决方法：
.box {
/* 非 ie 的主流浏览器识别的垂直居中的方法 */
display: table-cell;
vertical-align:middle;
/* 设置水平居中 */
text-align:center;
/* 针对 ie 的 hack */
*display: block;
*font-size: 175px;/* 约为高度的 0.873，200*0.873 约为 175*/
*font-family:arial;/* 防止非 utf- 8 引起的 hack 失效问题，如 gbk 编码 */
width:200px;
height:200px;
border: 1px solid #eee;
}
.box img {/* 设置 图片垂直居中*/
vertical-align:middle;
}
正文完