在網(wǎng)頁設(shè)計過程中，我們常常需要使用圖片來豐富頁面的內(nèi)容。但是，有時候我們希望圖片能夠在頁面中居中顯示，如何實現(xiàn)呢？這就需要使用CSS來實現(xiàn)了。 在CSS中，有一種叫做居中對齊的處理方式，通過設(shè)置圖片的外邊距和內(nèi)邊距等屬性，就可以實現(xiàn)圖片的居中對齊。下面來一步步介紹如何實現(xiàn)圖片的居中對齊。 首先，在HTML頁面中添加一張圖片的代碼，例如：

<div class="wrapper"><img src="example.jpg" alt="Example Image"></div>

這里使用一個div容器，將圖片包含在其中。 接下來，我們需要通過CSS來設(shè)置樣式。 首先，將容器的寬度設(shè)置為100%，這樣能夠自適應(yīng)頁面的寬度。

.wrapper {
width: 100%;
}

然后，將容器的文本對齊方式設(shè)置為居中。

.wrapper {
width: 100%;
text-align: center;
}

接下來，我們需要設(shè)置圖片的樣式。首先，將圖片的外邊距設(shè)置為0，這樣能夠消除上下外邊距。

.wrapper img {
margin: 0;
}

然后，將圖片的顯示方式設(shè)置為塊級元素，并將其寬度和高度設(shè)置為auto。這樣會使圖片水平和垂直居中。

.wrapper img {
margin: 0;
display: block;
width: auto;
height: auto;
}

最后，給圖片設(shè)置一個最大寬度，防止圖片太大，影響頁面顯示。

.wrapper img {
margin: 0;
display: block;
max-width: 100%;
height: auto;
}

這樣，我們的圖片就成功實現(xiàn)了居中對齊。完整的CSS代碼如下：

.wrapper {
width: 100%;
text-align: center;
}
.wrapper img {
margin: 0;
display: block;
max-width: 100%;
height: auto;
}

詳細(xì)圖文并茂的展示，希望能對您有所幫助：https://blog.csdn.net/u013480600/article/details/51675228