在之前开发中，公司有这么一个要求，要求在外围标签li（li是浮动的）是固定宽高的情况下，里面图片大小不固定，要让图片垂直居中，而且要兼容所有浏览器。后来自己测试了一下，下面是我所知道的，几种让大小不定的图片垂直居中的方法。
第一种，增加额外标签让图片在固定大小的盒子居中。
这种方法是额外的加一个span标签（<span class=”fixie”></span>），给span定义有特别的样式。
css代码如下：
.box{width:500px; height:160px;}
.box li{width:110px;height:140px;border:1px solid #ddd; margin:10px;overflow:hidden;vertical-align:middle; float:left;display:inline;}
.box img{width:110px; vertical-align:middle;}
.fixie{width:0;height:100%;display:inline-block;vertical-align:middle;overflow:hidden;}
html代码如下：
<ul class=”box”>
<li><span class=”fixie”></span><img src=”1.jpg” alt=”aaaaa” /></li>
<li><span class=”fixie”></span><img src=”2.jpg” alt=”aaaaa” /></li>
<li><span class=”fixie”></span><img src=”3.jpg” alt=”aaaaa” /></li>
</ul>
效果如下：
第二种方法是使用display:table-cell;ie6/7不过并不支持，所以我们给加上font-size:124px;来居中
css代码：
.box1{width:500px; height:160px;}
.box1 li{width:110px;height:140px;border:1px solid #ddd;margin:10px;float:left;display:inline;}
.box1 li a{width:110px;height:140px;text-align:center;vertical-align:middle;display:table-cell;font-size:124px;}
.box1 img{width:110px;vertical-align:middle;}
html代码：
<ul class=”box1″>
<li><a href=”#” target=”_blank”><img src=”1.jpg” alt=”aaaaa” /></a></li>
<li><a href=”#” target=”_blank”><img src=”2.jpg” alt=”aaaaa” /></a></li>
<li><a href=”#” target=”_blank”><img src=”3.jpg” alt=”aaaaa” /></a></li>
</ul>
效果如下：
第三种方法是想到用a内联元素标签，不用浮动。如下所示，直接用font-size:124px;vertical-align:middle
css代码：
.box2{width:500px; height:160px;}
.box2 a{height:auto;overflow:hidden;margin:10px;font-size:124px;text-align:center;vertical-align:middle;}
.box2 img{width:110px;vertical-align:middle;}
html代码：
<div class=”box2″>
<a href=”#” target=”_blank”><img src=”1.jpg” alt=”aaaaa” /></a>
<a href=”#” target=”_blank”><img src=”2.jpg” alt=”aaaaa” /></a>
<a href=”#” target=”_blank”><img src=”3.jpg” alt=”aaaaa” /></a>
</div>
但是，当给a加上（display:inline-block;*display:inline;zoom:1;width:110px;border:1px solid #ddd;），并写给固定宽度后，ie6/7和chrome下表现不一致了。后来就没有用这种方法，。有图有真相。如果给a加固定高度的话，不能居中（当时需求是边框层固定），在此记一下。
效果如下：
ie6/7:
chrome:
