利用vertical-align:middle垂直居中

1.方法一，利用空的span实现图片居中

    
     
    456 

在盒子里给一个空的span，
.j1{
display: inline-block;//必要,不然height不能设置
width: 0;
height: 100%;
vertical-align: middle;
}
此方法可兼容ie8，（flex只能兼容ie9以上，不包括ie9）

2.利用display：table-cell实现

    
     
    456 

参考来自 https://www.jianshu.com/p/dea069fecb62
img和span的vertical：middle都设置了。就能互相对齐居中。 链接中的写着，若img写了vertical-align: middle；而span没有写，那么span就相对于img的基线

所以引申，当span，和img都设置vertical-align：middle即可。所以类推出方法1
方法1中虽然span的widht为0；但是height为100%；它们同时设vertical-aligin：middlle。即img可根据span的基线对齐，又因为span占height：100%。那么img就相对于父容器居中