大小不固定图片的水平垂直居中

1.推荐使用方法（利用font-size:0与空白标签）

HTML

<div class="imgMid-a">
    <ul>
        <li><a href="#"><span></span><img src="http://sandbox.runjs.cn/uploads/rs/25/ijlopkg9/15050601.jpg"></a></li>
        <li><a href="#"><span></span><img src="http://sandbox.runjs.cn/uploads/rs/25/ijlopkg9/15050602.jpg"></a></li>
        <li><a href="#"><span></span><img src="http://sandbox.runjs.cn/uploads/rs/25/ijlopkg9/15050603.jpg"></a></li>
    </ul>    
</div>

CSS

*{margin: 0;padding: 0;}
li{list-style: none;}
img{border: none;}

.imgMid-a{width: 700px;height: 200px;margin:50px auto;}
.imgMid-a ul{width: 750px;}
.imgMid-a li{float: left;width:200px;height:200px;margin-right: 50px;text-align: center;font-size: 0;}
.imgMid-a li a{display: block;width: 198px;height: 198px;border: 1px solid #ccc;}
.imgMid-a li a:hover{border: 1px solid #f00;}
 
.imgMid-a li img{vertical-align: middle;max-width:178px;max-height:178px;}