在網頁設計中，有時需要將圖片居中顯示。如何實現呢？這里我們介紹一種使用CSS來實現圖片居中顯示的方法。 首先，在HTML中將圖片插入到需要居中顯示的位置，例如：

<div class="center">
<img src="image.jpg" alt="圖片">
</div>

其中，我們給外層div加上了一個class，方便后面在CSS中調用。 接著，在CSS中定義.center的樣式。

.center {
display: flex; /* 使用flex布局 */
justify-content: center; /* 水平方向居中 */
align-items: center; /* 垂直方向居中 */
}

這里使用了flex布局，display屬性設置為flex。justify-content屬性設置為center，表示水平方向居中，align-items屬性設置為center，表示垂直方向居中。 使用上述代碼，即可實現圖片在其父級容器中居中顯示。若圖片的大小超出了父級容器的大小，可使用max-width和max-height屬性設置圖片的最大寬高。 總結：使用CSS中的flex布局，可以輕松實現圖片在其父級容器中居中顯示。通過調整屬性值，可適應不同的頁面和圖片大小。