图片垂直居中的使用技巧

以前写图片轮换遇到过，第一次知道 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 >