CSS是前端開(kāi)發(fā)中不可或缺的一部分，它可以控制網(wǎng)頁(yè)的樣式和布局。在網(wǎng)頁(yè)中，經(jīng)常需要將圖片水平居中，這時(shí)候就可以使用CSS來(lái)實(shí)現(xiàn)。

首先，我們需要一個(gè)包含圖片的HTML代碼:

<div class="image-container">
<img src="example.jpg">
</div>

在這段代碼中，我們使用了一個(gè)div元素來(lái)包含圖片，并賦予其一個(gè)class名為"image-container"，這樣可以方便我們?cè)贑SS中選擇這個(gè)元素。

接下來(lái)，我們需要使用CSS來(lái)將圖片水平居中。下面是具體的代碼：

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

在這段CSS代碼中，我們首先使用了flexbox布局，將其display屬性設(shè)置為flex，并使用justify-content屬性來(lái)將圖片水平居中。

接著，我們對(duì)圖片進(jìn)行了些許調(diào)整，將其max-width屬性設(shè)置為100%，這樣可以讓圖片適應(yīng)其容器的大小，同時(shí)也保證了圖片的比例不會(huì)變形。

此外，我們還將圖片的height屬性設(shè)置為auto，以便根據(jù)其寬度來(lái)自動(dòng)調(diào)整其高度。

綜上所述，利用CSS可以輕松實(shí)現(xiàn)圖片水平居中的效果，這樣可以讓網(wǎng)頁(yè)更加美觀和精致。