在網頁設計中，經常需要將圖片居中顯示。而CSS中提供了多種方式來實現圖片居中。下面我們來了解一下幾種常見的居中方式。 使用margin屬性 我們可以通過設置圖片的margin屬性來實現圖片居中。具體代碼如下：

img {
display: block;
margin: auto;
}

這里將圖片的display屬性設置為block，使其變為塊級元素。然后設置margin屬性為auto，這樣就可以實現水平和垂直居中了。 使用text-align屬性 如果圖片在一個塊級元素中，我們可以通過設置這個元素的text-align屬性來實現圖片居中。具體代碼如下：

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

這里將塊級元素的text-align屬性設置為center，然后將圖片的display屬性設置為inline-block，就可以實現圖片在水平方向上居中了。 使用flex布局 使用flex布局也是一種常見的方式來實現圖片居中。具體代碼如下：

.container {
display: flex;
justify-content: center;
align-items: center;
}

這里通過設置容器的display屬性為flex，使得容器成為一個flex容器。然后設置justify-content屬性為center，使圖片在水平方向上居中。再將align-items屬性也設置為center，這樣圖片就在垂直方向上居中了。 總結 在實際應用中，根據具體情況選擇合適的居中方式。使用margin屬性簡單明了；使用text-align屬性適用于圖片在塊級元素中的情況；使用flex布局則可以更加靈活地控制圖片的居中方式。無論哪種方式，都可以實現圖片的居中效果，讓網頁看起來更加美觀。