图片垂直居中

对支持 display:table-cell; 属性的浏览器,结合 vertical-align:middle; 属性就可以实现垂直居中;

在不支持 display:table-cell; 的浏览器（IE）中利用文字结合行高的方法来实现垂直居中;

效果:

• 
• 
• 

代码:

<style type="text/css">
.listImg li{
    border: 1px solid #000;
    width: 200px;
    height: 200px;
    text-align: center;
    display: table-cell;
    overflow: hidden;
    vertical-align: middle;
    *float:left;
    *font-family:simsun;
    *font-size:200px;
    *line-height:1;
}
.listImg li img{
    vertical-align:middle;
}
</style>

<ul class="listImg">
    <li>
        <img src="http://gtms04.alicdn.com/tps/i4/T1.PNlFJNdXXbXVSUh-180-130.png" alt="">
    </li>
    <li>
        <img src="http://gtms04.alicdn.com/tps/i4/T1.PNlFJNdXXbXVSUh-180-130.png" alt="">
    </li>
    <li>
        <img src="http://gtms04.alicdn.com/tps/i4/T1.PNlFJNdXXbXVSUh-180-130.png" alt="">
    </li>
</ul>