图片水平垂直居中的CSS解决方案！

html：

<ul>
<li>
<div><a href=”#” target=”_blank”><img src=”images/brand/product/1.png” width=”142″ height=”158″ alt=”产品名称一”></a></div>
<span><a href=”#” target=”_blank”>海星鱼缸水族箱&nbsp;&nbsp;AEC&nbsp;&nbsp;单拱面&nbsp;&nbsp;拱面鱼缸</a></span>
<span>免换水&nbsp;&nbsp;全国包邮&nbsp;&nbsp;生态鱼缸</span>
<div><a href=”#” target=”_blank”>查看详情</a></div>
</li>
<li>
<div><a href=”#” target=”_blank”><img src=”images/brand/product/2.png” width=”167″ height=”161″ alt=”产品名称二”></a></div>
<span><a href=”#” target=”_blank”>海星鱼缸水族箱&nbsp;&nbsp;AEC&nbsp;&nbsp;单拱面&nbsp;&nbsp;拱面鱼缸</a></span>
<span>免换水&nbsp;&nbsp;全国包邮&nbsp;&nbsp;生态鱼缸</span>
<div><a href=”#” target=”_blank”>查看详情</a></div>
</li>
<li>
<div><a href=”#” target=”_blank”><img src=”images/brand/product/3.png” width=”139″ height=”161″ alt=”产品名称三”></a></div>
<span><a href=”#” target=”_blank”>海星鱼缸水族箱&nbsp;&nbsp;AEC&nbsp;&nbsp;单拱面&nbsp;&nbsp;拱面鱼缸</a></span>
<span>免换水&nbsp;&nbsp;全国包邮&nbsp;&nbsp;生态鱼缸</span>
<div><a href=”#” target=”_blank”>查看详情</a></div>
</li>
<li>
<div><a href=”#” target=”_blank”><img src=”images/brand/product/4.png” width=”138″ height=”161″ alt=”产品名称四”></a></div>
<span><a href=”#” target=”_blank”>海星鱼缸水族箱&nbsp;&nbsp;AEC&nbsp;&nbsp;单拱面&nbsp;&nbsp;拱面鱼缸</a></span>
<span>免换水&nbsp;&nbsp;全国包邮&nbsp;&nbsp;生态鱼缸</span>
<div><a href=”#” target=”_blank”>查看详情</a></div>
</li>
</ul>

css：

.brand_list .pro_list {
float: left;
width: 984px;
overflow: hidden;
}
.pro_list li {
display: block;
float: left;
height: 300px;
width: 210px;
margin-right: 16px;
overflow: hidden;
padding: 0 10px;
text-align: center;
}
.pro_list .thumb {
height: 200px;
width: 200px;
overflow: hidden;
position: relative;
display: table-cell;
text-align: center;
vertical-align: middle;
padding: 5px;
}
.pro_list .thumb a {
display: block;
position: static;
*position: absolute;
top: 50%;
}
.pro_list .thumb img {
position: static;
*position: relative;
top: -50%;
left: -50%;
}

css：在IE6的垂直居中有一点小的问题，就是并未绝对的垂直居中，只是近似罢了，但是在其它浏览器中却是没有问题的哈。