如何让图片在块元素水平垂直居中

（1）第一种：用vertical-align

<div class="method1">
  <span class="tiptop"></span>
  <img class="test" src="img/Dota2.jpg" alt="dota2">
</div>
 
 
<style>
.method1{
  text-align:center;
}
/*vertical-align:middle  是依赖div内子元素最高的行高来实现对某元素居中的，而我们只需要建立一个新元素，给他加上inline-block属性 再把他高度设置为100%就行了,在下面的<img>设置vertical-align就生效了*/
.tiptop{
  height:100%;
  display:inline-block;
  vertical-align:middle;
}
img{
  vertical-align:middle;
}
</style>

（2）第二种：flex布局（注意浏览器兼容性）

<div class="method2">
  <img src="img_p1_title.png">
</div>
 
 
<style>
.method2 {
  display: flex;