在網頁布局中，圖片水平居中是一個常見的需求。使用 CSS 可以很容易地實現這個效果。

方法一：使用 flex 布局。將圖片所在的父元素設置為 flex 容器，同時將justify-content屬性設置為center。

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

方法二：使用text-align: center。將圖片所在的父元素設置為text-align: center，同時將圖片的display屬性設置為inline-block。

.container {
text-align: center;
}
.container img {
display: inline-block;
max-width: 100%;
}

方法三：使用絕對定位。將圖片所在的父元素設置為相對定位，同時將圖片的position屬性設置為絕對定位，上下左右均為 0，然后使用transform: translateX(-50%)將圖片水平居中。

.container {
position: relative;
}
.container img {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
max-width: 100%;
transform: translateX(-50%);
}

以上三種方法均可以實現圖片水平居中的效果，具體使用哪種方法取決于具體的頁面布局需求。