css对元素进行垂直居中(基于基线的方式)

对元素进行垂直居中：
对要垂直居中的元素，用一个同级元素做垂直参考。
例如在div中对img垂直居中：
img要
1.设为inline-block类型(本身就是这个类型可以跳过)
2.vertical-align:middle;
作为参考对齐基线的span:
1.宽度设为0,一般不想看到基线
2.元素类型设为inline-block
3.设置垂直居中属性:vertical-align:middle
4.设置span的高度,即参考基线的高度:,一般高度是父元素的高度,可以设置成100%
例子如下:

 span{
            width: 0;
            height: 100%;
            display: inline-block;
            vertical-align: middle;
        }
 img{
            vertical-align: middle;
            /*margin: auto;*/
        }