让人纠结的图片垂直居中

　　一开始做图片居中时候，水平居中还好弄，直接<img />的父容器加上"text-align:center;"就好了。

　　在图片显示区域固定、图片宽高固定的时候处理也还好，可以通过最原始的方法，也就是定位的方式。

　　1 定位的方式（群友“彼岸花开”提供了他的做法）：

<style type="text/css">
     .container {
         position:relative;
         width:400px;
         height:400px;
     }
 
     .container img {
         max-width:100%;
         max-height:100%;
         position:absolute;
         top:0;
         left:0;
         bottom:0;
         right:0;
         margin:auto;
     }
 </style>
 
 <div class="container">
     <img src="http://ubmcmm.baidustatic.com/media/v1/0f000PHImp-QcNIKov0of0.png" />
 </div>

　　1 第二种方式我也不知道原理，不过我试过了确实OK（群友“姗姗来迟”提供）：

<style type="text/css">
a {
     display: block;
     width: 300px;
     height: 300px;
     border-radius: 5px;
     font-size: 0;
     background-color: #c00;
     padding: 4px;
}
 
a img {
     width: 300px;
     display: inline-block;
     vertical-align: middle;
     border: 0;
}
 
a span {
     display: inline-block;
     vertical-align: middle;
     width: 0;
     height: 100%; 
}
</style>

<a href="">
    <img src="http://ubmcmm.baidustatic.com/media/v1/0f000PHImp-QcNIKov0of0.png" />
    <span></span>
</a>

　　1 第三种是display:flex （群友“成都-蛋蛋”提供）：

<style type="text/css">
    .box {
    height: 300px;
    width: 500px;
    background: pink;
    display: flex;
    justify-content:center;
    align-items: center;    
    }
</style>

<div class="box">
    <img src="http://pic2.itrip.com/p/20160126104950-167.png" alt="">
</div>