CSS是網(wǎng)頁設(shè)計中不可或缺的一部分，可以用來控制頁面上的樣式和布局。在網(wǎng)頁設(shè)計中，圖片的排版也十分重要，本文將會介紹如何使用CSS讓圖片居中顯示。

img {
display: block;
margin: 0 auto;
}

上面的代碼是讓圖片居中顯示的最簡單的方式。首先，使用display屬性將圖片設(shè)置為塊級元素，然后設(shè)置margin屬性的左右值為auto即可實現(xiàn)圖片水平居中。

需要注意的是，這種方法只適用于圖片本身沒有超出其父元素寬度的情況。如果圖片寬度超出容器寬度，圖片將會撐滿容器并且顯示在容器的左側(cè)。

如果需要在圖片超出容器時仍然保持居中顯示，可以使用以下代碼：

.container {
display: flex;
justify-content: center;
}
.container img {
margin: auto;
max-width: 100%;
height: auto;
}

使用布局方式為flex的容器，將內(nèi)容水平居中。然后，圖片的margin屬性設(shè)置為auto，max-width設(shè)置為100%（HTML中的img標簽?zāi)J情況下不會超過容器的寬度），height設(shè)為auto。這樣即可實現(xiàn)圖片居中顯 示，而不管圖片是否超出容器寬度。

總之，使用CSS讓圖片居中顯示是十分簡單的，只需通過設(shè)置display屬性和margin屬性值，就可以實現(xiàn)圖片水平居中。如果需要處理圖片超出容器寬度的情況，可以使用flex布局來實現(xiàn)居中顯示。希望這篇文章可以幫助你更好地掌握CSS圖片排版的技巧。