在web開發(fā)過程中，經(jīng)常遇到圖片大小超過網(wǎng)頁寬度的情況。這時，我們通常需要將圖片居中，以使頁面更加美觀。然而，使用簡單的CSS代碼實現(xiàn)圖片居中并不是一個簡單的過程。

當圖片大小超過網(wǎng)頁寬度時，圖片默認會左對齊，這對于我們布局網(wǎng)頁造成了困擾。下面我們來看一下CSS實現(xiàn)圖片居中的方法。

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

以上代碼是實現(xiàn)圖片居中最簡單的方法。其中，display: block;將圖片轉(zhuǎn)換為塊級元素，以便使用margin: 0 auto;實現(xiàn)水平居中。這種方法僅適用于圖片尺寸小于父容器寬度的情況。

而當圖片尺寸大于父容器寬度時，我們需要用到另外一種方法。

.container {
position: relative;
text-align: center;
}
.container img {
position: absolute;
left: 50%;
transform: translateX(-50%);
}

以上代碼使用position: relative;實現(xiàn)相對定位，并使用text-align: center;讓圖片水平居中。接下來，使用position: absolute;將圖片絕對定位，使用left: 50%;將圖片左邊框與父容器中心線重合。最后，使用transform: translateX(-50%);將圖片水平居中。

最后需要注意的是，以上方法均需將圖片包含在父級容器中，以保證位置居中的正確性。