SOURCE

<h1>1. 行高=div高度</h1>
<div class="container" 
     style="text-align: center; line-height:300px;">
<img src="http://www.w3school.com.cn/i/ballade_dream.jpg"
     style="display: inline-block; vertical-align: middle;"
     alt="郁金香"  />
</div>

<h1>2. 利用table实现图片垂直居中</h1>
<div class="container"
     style="text-align: center; display: table;">
   <span style="display: table-cell; vertical-align: middle; ">
      <img src="http://www.w3school.com.cn/i/ballade_dream.jpg"
            style="display: inline-block;" />
   </span>
</div>

<h1>3. 利用绝对定位</h1>
<div class="container"
     style="position: relative;">
    <img alt="" 
         src="http://www.w3school.com.cn/i/ballade_dream.jpg"  
         style="position: absolute; left:50%; top: 50%; 
            transform: translateX(-50%) translateY(-50%);" />
</div>


<h1>4. 移动端可以利用flex布局实现css图片垂直居中</h1>
<div class="ui-flex container" >
    <img alt="" 
         src="https://www.baidu.com/img/baidu_jgylogo3.gif" />
</div>

.container{
  width:300px;
  height:300px;
  border:1px red solid;
}

.ui-flex {
    display: flex !important;
    /*实现水平居中*/
    justify-content: center;
    /*实现垂直居中*/
    align-items: center;
}