水平垂直居中（1）

图片限制最大宽度，大图展示最大宽，小图为原图宽，在大小固定的div中水平垂直居中

by hezhi

HTML

<h1>1.利用font-size:0与空白图片</h1>
<div class="imgMid-a">
    <ul>
        <li><a href="#"><img class="show-img" src="http://sandbox.runjs.cn/uploads/rs/25/ijlopkg9/15050601.jpg" alt=""><img class="alpha-img" src="http://sandbox.runjs.cn/uploads/rs/25/ijlopkg9/px1.gif" /></a></li>
        <li><a href="#"><img class="show-img" src="http://sandbox.runjs.cn/uploads/rs/25/ijlopkg9/15050602.jpg" alt=""><img class="alpha-img" src="http://sandbox.runjs.cn/uploads/rs/25/ijlopkg9/px1.gif" /></a></li>
        <li><a href="#"><img class="show-img" src="http://sandbox.runjs.cn/uploads/rs/25/ijlopkg9/15050603.jpg" alt=""><img class="alpha-img" src="http://sandbox.runjs.cn/uploads/rs/25/ijlopkg9/px1.gif" /></a></li>
    </ul>
</div>
            

<h1>2.推荐使用方法。利用font-size:0与空白标签。原理与1一致</h1>
<div class="imgMid-b">
    <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>
            

<h1>3.利用font-size:0.873倍高度与table-cell。</h1>            
<div class="imgMid-c">
    <ul>
        <li><a href="#"><img src="http://sandbox.runjs.cn/uploads/rs/25/ijlopkg9/15050601.jpg"></a></li>
        <li><a href="#"><img src="http://sandbox.runjs.cn/uploads/rs/25/ijlopkg9/15050602.jpg"></a></li>
        <li><a href="#"><img src="http://sandbox.runjs.cn/uploads/rs/25/ijlopkg9/15050603.jpg"></a></li>
    </ul>
</div>  
 
<div class="imgMid-d">
    <ul>
        <li><div><img src="http://sandbox.runjs.cn/uploads/rs/25/ijlopkg9/15050601.jpg"></div></li>
        <li><div><img src="http://sandbox.runjs.cn/uploads/rs/25/ijlopkg9/15050602.jpg"></div></li>
        <li><div><img src="http://sandbox.runjs.cn/uploads/rs/25/ijlopkg9/15050603.jpg"></div></li>
    </ul>
</div> 

            
<div...

CSS

*{margin: 0;padding: 0;}
li{list-style: none;}
img{border: none;}
h1{font:bold 24px/50px "微软雅黑";color: #333;}
.imgMid-a{width: 700px;height: 200px;margin:50px auto;}
.imgMid-a ul{width: 750px;}
.imgMid-a li{float: left;width:198px;height:198px;border: 1px solid #ccc;margin-right: 50px;text-align: center;font-size: 0;}
.imgMid-a li a{display: block;width: 198px;height: 198px;}
.imgMid-a .alpha-img{height: 100%;width: 1px;vertical-align: middle;}
.imgMid-a .show-img{vertical-align: middle;max-width:178px;max-height:178px;}


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


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


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

.imgMid-e{width: 700px;height: 200px;margin:50px auto;}
.imgMid-e ul{width: 750px;}
.imgMid-e li{float: left;margin-right: 50px;width: 198px;height: 198px;border: 1px solid #ccc;display: table-cell;font-size:173px;text-align:...