在網(wǎng)頁(yè)設(shè)計(jì)中，有時(shí)需要將圖片居中顯示。如何實(shí)現(xiàn)呢？這里我們介紹一種使用CSS來(lái)實(shí)現(xiàn)圖片居中顯示的方法。 首先，在HTML中將圖片插入到需要居中顯示的位置，例如：

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

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

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

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