當(dāng)我們插入的圖片小于父盒子的時候业岁，圖片就會默認(rèn)在左上角顯示宪哩。
一隧枫、先給父盒子添加 text-aling:centor; 使圖片在水平居中顯示锚沸。
二跋选、在img標(biāo)簽后添加一個行內(nèi)塊標(biāo)簽（如果不是可轉(zhuǎn)換為行內(nèi)塊）。
三哗蜈、設(shè)置span標(biāo)簽樣式（span寬度可以為0前标，高度100%自適應(yīng)）
span {
display: inline-block;
width: 0;
height: 100%;
background: red;
vertical-align: middle;
}
四、給img標(biāo)簽也添加 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>
