图片垂直居中CSS研究

对于图片垂直居中应该是从事页面重构的朋友经常遇见的。
用过table布局，我们都知道，要图片居中，真是易过借火，但是，在div这种块标签中呢？
如果div也像：table那样就好了，事实上，真的能如此，当然，要把IE6、7排除在外，代码如下：

以下是引用片段：
.box{
display: table-cell;
vertical-align: middle;
text-align: center;
width: 120px;
height: 120px;
background: #000;
}
.box img{
width: 80px;
height:80px;
}
<div class="box">
<img src="1.jpg"/>
</div>
根据上面的代码，我们通过不同的浏览器看下结果。下图从左往右，分别是IE6、IE7、IE8、FF3.6、Chrome5.03、Opera10.54

由截图我们可以得出一个结果，IE6和IE7很贱，因为这两个浏览器不支持“display: table-cell;”。为此，我们不得不在此基础上，为IE6、7来编写特定的CSS来实现图片的居中，网上的方法很多，其中有一种很无解的，如何无解？看下吧，我们把CSS修改成这样：

以下是引用片段：
.box{
display: table-cell;
vertical-align: middle;
text-align: center;
width: 120px;
height: 120px;
*font-size: 105px;
background: #000;
}
.box img{
width: 80px;
height:80px;
vertical-align: middle;
}
好了，看到了没有，添加了两条属性，其中有一条让人相当费解的“font-size: 105px;”。什么意思？不用解释了吧，也就是把字体设为105px大小，但这有什么用呢？又为什么是105px呢？跟你说，我也不明白，根据多次实验表明，当图片的父级块元素的高与它的字体号数符合公式高度/字体号数=1.14的时候，图片便无限的接近居中，是的，是指在IE6、7里面，不信？我们再看下截图：

截图绝对没有经过PS处理，真的居中了，神啊！别问我为什么了，问我，我也回答不上，情况就是这样，记住，图片要添加“vertical-align:middle”这一条属性才能起作用