当在一个给定宽高盒子内加入img标签插入一张图片，图片宽高小于盒子时，图片默认在左上角显示。
实现代码：
<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>
<div class="box">
<img src="images/005.png" alt="">
<!-- 第二步 -->
<span></span>
</div>
实现过程
1.jpg
1、第一步，首给盒子添加 text-aling:centor; 使文本水平居中显示。
02.jpg
2、第二步，在img标签后添加一个常用标签（下文引用span标签为例）。
4.jpg
3、第三步，设置span标签样式（span宽度不能省，高度100%自适应）：
display: inline-block;
width: 0;
height: 100%;
background: red;
vertical-align: middle;
4、第四步，给img标签添加 vertical-align: middle; 属性
效果演示
003.jpg
