圖片在網頁設計中占據了重要位置，它可以豐富我們的頁面和內容。但有時候在實際應用中，我們會遇到圖片位置不居中的問題。今天我們主要討論如何通過CSS將圖片居中。 首先，我們先看一下html結構中的圖片代碼。一般情況下，我們會在img標簽中添加一個class或id屬性，以便于后續的樣式設置，如下所示：

<img src="example.jpg" class="center-img">

在圖片父元素中設置text-align屬性 我們可以通過設置圖片的父元素的text-align屬性值為center來將圖片水平居中。

p {
text-align: center;
}
img.center-img {
display: inline-block;
}

在圖片自身中使用margin屬性 在圖片自身中使用margin屬性來進行居中是CSS居中的另一種方式。

img.center-img {
display: block;
margin: 0 auto;
}

這里的display屬性有變化，由inline-block更改為block。事實上，這兩種方式都可以較好地實現圖片居中。 最后，總結一下平時我們在實際應用中如何將圖片居中。無論是設置text-align還是margin，都需要注意圖片的display屬性。另外，在實際應用中，我們根據自己實際情況需要選擇哪種方法。