做图片列表的时候，常常遇到这样的问题：图片的比例不同导致无法美观的对齐。如果在表格布局的时代，给表格加上垂直和水平居中就搞定了。但是CSS布局中，却不容易直接让图片垂直居中。
今天，小车就来分享下如何使FF和IE中某容器中的图片绝对居中，以方便我们做前文提到的不规则图片的列表。
我们以UL图片列表为例：
<ul>
<li>
<a class=”thumb” href=”/case/20110422293.html”><img src=”images/huxing.jpg” width=”120″ height=”40″ alt=”中国建筑”></div>
<p><a href=”/case/20110422293.html”>中国建筑</a></p>
</li>
… …
<li>
<a class=”thumb” href=”/case/20110422319.html”><img src=”images/huxing.jpg” width=”120″ height=”120″ alt=”中国石油”></div>
<p><a href=”/case/20110422319.html”>中国石油</a></p>
</li>
</ul>
给上边的html定义如下CSS
#case ul li a.thumb{
display:table-cell !important;
vertical-align:middle !important; /*设置水平居中*/
text-align:center; /* 针对IE的Hack */
display: block;
*font-size:126px; /*约为高度的0.873，200*0.873 约为175*/
*font-family:Arial;/*防止非utf-8引起的hack失效问题，如gbk编码*/
width:142px;
height:142px;
overflow:hidden;
}
#case ul li a img {
width:130px;
height:auto;
vertical-align:middle;
border:3px solid #999; /* 伪装阴影效果 */
border-left:none;
border-top:none;
}
刷新页面，效果实现了，如下为效果：
