在網頁設計中，很多時候需要將圖片居中顯示。

CSS 可以幫助我們實現這個功能。

/* CSS 代碼 */
.img-container {
display: flex;
justify-content: center;
align-items: center;
height: 200px;
}
.img-container img {
max-width: 100%;
max-height: 100%;
}

我們首先需要創建一個包裹圖片的容器，然后對其進行居中處理。

上方的 CSS 代碼使用了 Flexbox 布局，其中 display: flex 將容器轉換為 Flex 容器，justify-content 和 align-items 屬性分別控制了水平和垂直方向上的居中對齊。

在容器內部，我們還需要對圖片進行適當的尺寸調整，以避免圖片超出容器大小。

max-width 和 max-height 屬性分別控制圖片的最大寬度和最大高度，保證圖片在不失真的情況下適應容器。

通過以上 CSS，我們可以輕松將圖片居中顯示。在實際項目中，我們還可以根據需要進行更加精細的調整，以實現更好的效果。