当我们插入的图片小于父盒子的时候，图片就会默认在左上角显示。
一、先给父盒子添加 text-aling:centor; 使图片在水平居中显示。
二、在img标签后添加一个行内块标签（如果不是可转换为行内块）。
三、设置span标签样式（span宽度可以为0，高度100%自适应）
span {display: inline-block;width: 0;height: 100%;background: red;vertical-align: middle;}
四、给img标签也添加 vertical-align: middle;
总体代码如下：
html代码
<!-- html --><div class="box"><img src="images/005.png" alt=""><span></span></div>
css代码：
<style>div {width: 600px;height: 500px;background-color: #86d2f0;margin: 100px auto;border: 1px solid red;text-align: center;}span {display: inline-block;width: 0;height: 100%;background: red;vertical-align: middle;}img {vertical-align: middle;}</style>
