未知高度图片的垂直居中

在流行用TABLE制作网页布局的时代里，让某个未知高度的图片垂直居中是非常简单的事情，单元格标签td的valign属性能可以轻松实现这个效果。但在DIV+CSS的布局下，这个问题却变得棘手。

CSS:

div{width:300px;height:300px;line-height:300px;vertical-align:middle;border:1px solid red;}
img{width:50px;height:50px;vertical-align:middle;}

HTML:

<div><img src=” http://www.i-gen.cn/” alt=”HTML构筑了我的世界，CSS装饰了我的人生，SEO升华了我的梦。” /></div>

在以上代码中，我们将一个宽度和高度均为50像素（小于容器高度即可）的图片被放入一个边长300像素且行高也为300像素的正方形容器里。众所周 知，为块级元素设置一个与高度（height）一致的行高（ling-height）配合使用vertical-align:middle就可以实现文本 的垂直居中，但实际情况让我们大失所望，图片依旧位于容器的左上角。

看来单纯的设置行高和垂直对齐并不起作用，以下我常用的实现方法：

CSS:

div{width:300px;height:300px;line-height:300px;vertical-align:middle;border:1px solid red; display:table-cell;*display:block;*font-size:263px;}
img{width:50px;height:50px;vertical-align:middle;}

HTML:

<div><img src=”http://www.i-gen.cn/” mce_src=”http://www.i-gen.cn/” alt=”HTML构筑了我的世界，CSS装饰了我的人生，SEO升华了我的梦。” /></div>

display:table-cell属性可以使DIV容器作为表格单元格显示，但是IE6/7并不支持table-cell，所以这里用到了两个IE专属的CSS HACK，*display:block;*font-size:263px。这个解决方法的关键在于*font-size:263px，在height与font-size比值为1.14左右时IE可实现垂直居中。