之前讓圖片垂直居中對齊的時(shí)候，我寫錯(cuò)了，

line-hegiht 只是讓文本和行內(nèi)級元素垂直居中顯示，vertical-align: middle; 只是讓行內(nèi)級元素跟line-height 基線對齊，所以這種效果不是真正的垂直居中對齊。不推薦使用?。。?/p>

行內(nèi)級盒子的中心點(diǎn)與父盒基線加上x-height一半的線對齊

.box .list li .item {

position: relative;

display: inline-block;

/* 2.增加小盒子的寬度 1px,如果超出調(diào)整最后一個(gè)小盒子的寬度 */

/* width: 220px; */

width: 221px;

height: 167px;

/* 1.1解決邊框重疊 */

/* margin-left: -1px; */

/* 1.直接解決邊框重疊 */

margin-right: -1px;

border: 1px solid #eaeaea;

box-sizing: border-box;

}

.box .list li .item > img {

/* 讓圖片垂直水平居中對齊 */

position: absolute;

top: 0;

bottom: 0;

left: 0;

right: 0;

margin: auto;

}