外部一个div固定宽高，内部img也固定宽高，怎么让img在外部div中垂直居中对齐

html代码如下：

<div class="box"><imgsrc="images/img_01.png" class="img"></div>

 

css样式如下：

 

（1）第一种方法是使用绝对定位，但是这种方法必须要固定图片的宽度和高度，否则不能实现垂直居中。   

 div{ position:relative;width:300px; height:400px; border:solid 1px #ccc;}

img{position:absolute; wdith:100px;height:100px; margin:-50px 0px 0px -50px; top:50%; left:50%;}

（2）      使用display:table-cell，但是ie6和ie7不支持此属性。在box中加上line-height:400px;ie7下实现了垂直居中。

.box{ width:300px; height:400px;border:solid 1px #ccc; text-align:center; vertical-align:middle;display:table-cell; line-height:400px;}

注：但是这种方法ie6不支持。

（3）在第2种方法上进行了改进，但是效果还是不太让人满意。

.box{width:300px; height:400px; border:solid 1px #ccc; display:table;text-aligh:center; *position:relative; overflow:hidden;}

.subbox{ display:table-cell;vertical-align:middle;*position:absolute;*top:50%;}

.img{ *position:relative; *top:-50%;}

注：这种方法其实在ie6和ie7下图片也不是水平居中，总向右偏那么一点。暂时还没想到很好的解决方案。