在網(wǎng)頁設(shè)計(jì)中，圖片是不可或缺的元素之一。而讓圖片居中顯示是一個(gè)常見的需求。下面我們就來探討一下如何使用 CSS 實(shí)現(xiàn)圖片居中顯示的效果。 在 HTML 中插入圖片的方法一般是使用 img 標(biāo)簽。如果想讓圖片居中顯示，可以使用以下的 CSS 代碼：

img {
display: block;
margin: auto;
}

上述代碼中，我們首先將圖片的 display 屬性設(shè)置為 block，這樣圖片就能夠獨(dú)占一行，接下來將 margin 屬性設(shè)置為 auto，這樣就能夠自動(dòng)將圖片水平居中。 不過，如果我們需要在一個(gè)容器中居中顯示圖片，那么就需要稍作修改：

.container {
text-align: center;
}
.container img {
display: inline-block;
}

上述代碼中，我們首先將容器的 text-align 屬性設(shè)置為 center，這樣里面的元素就能夠在水平方向上居中。接下來將圖片的 display 屬性設(shè)置為 inline-block，這樣就能夠水平居中顯示圖片了。 當(dāng)然，還有其他一些方式可以實(shí)現(xiàn)圖片居中顯示的效果，比如使用 Flexbox 或 Grid 布局等。但上述方法已經(jīng)很常用和方便了。 總之，使用 CSS 讓圖片居中顯示并不難，只需要對 img 標(biāo)簽或其父元素進(jìn)行一些簡單的樣式設(shè)置就可以了。