當在一個給定寬高盒子內加入img標簽插入一張圖片辨绊，圖片寬高小于盒子時奶栖，圖片默認在左上角顯示。
實現(xiàn)代碼：
<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>
實現(xiàn)過程
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
