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

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

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

.wrapper {
width: 100%;
}

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

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

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

.wrapper img {
margin: 0;
}

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

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

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

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

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

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

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