div中未知宽高的img垂直居中显示

<div>
<img src="../pic/img2.png" alt="">
<img src="../pic/title.png" alt="">
<span>dasd</span>
</div>

div {
width: 800px;
height: 200px;
background-color: #eee;
line-height: 200px;
text-align: center;
font-size: 0; // 解决inline-block换行导致的空白
}

div span{
font-size: 16px;
vertical-align: middle;// 可让行内元素垂直居中
}

img {
vertical-align: middle; // 可让行内元素垂直居中
max-height: 100%; // 防止图片大小大于div容器大小
max-width: 100%;
}

效果图：



小结：
1.设置div的width,height;line-height等于height;text-align:center;font-size:0(解决inline-block换行导致的空白)

2.设置img的vertical-align:middle,同时设置max-height:100%,max-width:100%,防止未知图片的宽高大于div容器的宽高

3.若存在文字元素紧随图片之后即在同一行，则使用span包裹,并设置vertical-align:middle;

然后设置font-size:16px;

去掉：1中的text-align:center;为垂直居中

去掉: 1中的line-height等于height为水平居中