Edit in JSFiddle

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

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

.imgMid-b{width: 700px;height: 200px;margin:50px auto;}
.imgMid-b ul{width: 750px;}
.imgMid-b li{float: left;margin-right: 50px;}
.imgMid-b li a{width: 198px;height: 198px;border: 1px solid #000;display: table-cell;text-align: center;vertical-align: middle;}
.imgMid-b li a:hover{border: 1px solid #f00;}
.imgMid-b li img{vertical-align: middle;max-width: 178px;max-height: 178px;}
<!--[if lt IE 8]>
<style type="text/css">
.imgMid-b{height: 0;zoom:1;}
.imgMid-b a{display: block;}
.imgMid-b span{display: inline-block;vertical-align: middle;height: 100%;}
</style>
<![endif]-->