图片垂直居中的使用技巧

以前写图片轮换遇到过，第一次知道 display: table-cell;弄得不漂亮，1个多月后，用JS设置了一把，就好了，额，JS还是强大

使用纯 CSS 实现未知尺寸的图片(但高宽都小于200px)在 200px 的正方形容器中水平和垂直居中。

题目的难点在于两点：

1. 垂直居中；
2. 图片尺寸未知；

至于如何解决，下面是一个权衡的相对结构干净的 CSS 解决方法：

CSS Code：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20

.box {     border: 1px solid #eee;     /* 设置水平居中 */     text-align: center;     /* 非IE的主流浏览器识别的垂直居中的方法 */     display: table-cell;     vertical-align: middle;     /* 针对 IE 的 Hack */     *display: block;     /* 防止非 utf-8 引起的 hack 失效问题，如 gbk 编码 */     *font-family:Arial;     /* 约为高度的 0.873， 200*0.873 约为 175 */     *font-size: 175px;     height: 200px;     width: 200px; } .box img {     /* 设置图片垂直居中 */     vertical-align: middle; }

HTML Code：

1 2 3

<div class="box">     <img src="http://img.baidu.com/img/image/imglogo.gif" /> </div>