当我们插入的图片小于父盒子的时候，图片就会默认在左上角显示。
一、先给父盒子添加 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>
