<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的浏览器，那就不会起作用了。
原文：http://www.cnblogs.com/doudouhan/p/8011977.html