CSS表格內(nèi)的圖片是我們在網(wǎng)頁制作中經(jīng)常用到的元素，往往需要把圖片居中顯示，下面我們就來學(xué)習(xí)一下實現(xiàn)方法。

.table {
/* 讓表格寬度占據(jù)整個容器的寬度 */
width: 100%; 
/* 表格設(shè)置為表格布局 */
display: table;
}
.table-row {
/* 行也設(shè)置為表格布局 */
display: table-row;
}
.table-cell {
/* 單元格也是表格布局 */
display: table-cell;
/* 讓單元格內(nèi)的元素垂直水平居中 */
text-align: center;
vertical-align: middle;
}
img {
/* 讓圖片自適應(yīng)寬度 */
max-width: 100%;
/* 去掉圖片下面的空隙 */
display: block;
/* 讓圖片垂直居中 */
margin: 0 auto;
}

以上代碼中，我們首先設(shè)置表格的寬度占據(jù)整個容器寬度，然后分別設(shè)置行和單元格的布局為表格布局，并讓單元格內(nèi)的元素垂直水平居中。接著我們針對圖片進行樣式設(shè)置，讓圖片自適應(yīng)寬度，去掉下方空隙，同時讓圖片垂直居中。

有了以上CSS樣式，只需要在HTML中按照表格格式填寫圖片，就可以輕松實現(xiàn)在表格中對圖片的居中顯示了。