SOURCE

<div class="box">
  <img src="http://static.jsbin.com/images/dave.min.svg" alt=''>
</div>
<!-- box 容器通过 after或者before 生成一个高度 100% 的「备胎」，他的高度和容器的高度是一致的，相对于「备胎」垂直居中，在视觉上表现出来也就是相对于容器垂直居中了 -->

.box {
      border:1px solid #aaa;
      width:800px;
      height: 800px;
      text-align: center;
      vertical-align:center;
    }
   .box::after {content:'';
      display: inline-block;
      height:100%;
      vertical-align:middle;
    }  
    
    img {
    /*   height: 100px; */
      vertical-align:middle;
    }