图片在div中的居中问题

先给一张淘宝上的宝贝展示图：



我们看到图片在div中是居中的，那么这是怎么做到的呢。其实这在FF和IE下要有不同的实现方法，下面我们分析一下这个的做法：

HTML：

<div class="photo">
<a href="eg.html">
<img  src="eg.jpg">
</a>
</div>

CSS:

.photo {
height: 220px;
padding: 5px;
width: 220px;
}

.photo a {
display: table-cell;
font: 12px/1 Tahoma,Helvetica,Arial;
height: 220px;
text-align: center;
vertical-align: middle;
width: 220px;
*display:block;
*font-family:Arial;
*font-size:191px;
}

class名为photo的这个div的大小是固定的，而图片却有大有小，不能保证图片能全部充满div，所以为了能让用户点击了图片以外但在div之内的范围（padding部分除外）也能跳转到指定的链接上，我们给<a>加了一个和包含它的div相同的宽和高。但<a>属于行内元素，所以给它设置了一个display: table-cell属性，这样设置vertical-align: middle和text-align: center就能使图片居中了。

但在可怜的IE下却没有display: table-cell这个属性，所以在IE下我们只能设置display: block属性了，垂直居中的问题就只能靠font-size和line-height属性来解决了，所以就有了代码中的hack.

我查了下淘宝上的做法，也是按这种方式来做的。

IE6我诅咒你，快快消失吧，哈哈。