<body>
<div id="div1">
<img src="../06圖片懶加載/img/img1.png"/>
</div>
</body>
那么，img元素如何在div中居中對齊呢?
第一種方法：
第一步:在img標簽后面添加一個span元素
<body>
<div id="div1">
<img src="../06圖片懶加載/img/img1.png"/><span></span>
</div>
</body>
第二步:為這幾個元素設置樣式
1.把#div1元素設置text-align:center
2.把添加的元素span轉化為行內塊元素(display:inline-block)，並且設置vertical-align:middle
3.為img元素設置vertical-align:middle。
完成以上操作之后，這個Img元素在#div1中就是垂直居中的了，這種方法的兼容性等比較好，唯一的缺點可能就是要在元素后面添加一個元素
(注意：這個元素最好是span元素，如果是div元素的話，在低版本ie下有兼容問題)
第二種方法：
這種方法利用了css3的新特性
為#div1設置display:flex;vertical-align:middle;align-items:middle。
這種方法的缺點就是只要不支持css3的瀏覽器，那就不會起作用了。
