在網頁設計中，圖片是一個非常重要的元素，它可以為網頁增添生動感和美感。如果圖片在框中居中顯示，可以更好地吸引用戶的注意力。接下來，我們就來介紹如何通過CSS實現圖片在框中的居中顯示。 首先，我們需要使用HTML代碼來創建一個包含圖片的框。代碼如下：

<div class="box">
<img src="圖片地址" alt="圖片說明" />
</div>

此代碼創建了一個類名為“box”的div框，其中嵌套了一張圖片。接下來，我們需要使用CSS來對這個框進行樣式設置。代碼如下：

.box {
width: 300px; /* 設置框的寬度 */
height: 200px; /* 設置框的高度 */
border: 1px solid #ccc; /* 設置框的邊框 */
display: flex; /* 將框設置為彈性布局 */
justify-content: center; /* 將框內元素水平居中 */
align-items: center; /* 將框內元素垂直居中 */
}
.box img {
max-width: 100%; /* 設置圖片的最大寬度為框的寬度 */
max-height: 100%; /* 設置圖片的最大高度為框的高度 */
display: block; /* 將圖片設置為塊級元素 */
margin: 0 auto; /* 將圖片水平居中，垂直位置不變 */
}

上面的代碼中，我們首先定義了框的寬度、高度和邊框。然后，我們將框設置為彈性布局，并將框內元素水平和垂直居中。接下來，我們對圖片進行樣式設置。我們將圖片的最大寬度和最大高度都設置為框的寬度和高度，并將圖片設置為塊級元素。最后，我們將圖片水平居中，垂直位置不變。 通過上述代碼，我們可以實現將圖片在框內居中顯示。無論框的大小如何，圖片都能夠保持居中，并具有良好的列表頁面展示效果。