CSS文件設置圖片居中 使用CSS文件進行網頁設計時，設置圖片居中是一項非常重要的任務。下面我們將介紹如何使用CSS文件將圖片居中。 首先，需要在HTML文件中添加一個img標簽，指定圖片的位置。

下面這張圖片是需要居中的

<img src="image.jpg" alt="圖片">

接著，在CSS文件中添加以下樣式代碼，將圖片設為塊元素，并設置相應的外邊距，達到居中的效果。

img {
display: block;
margin: 0 auto;
}

解釋一下上述代碼：display: block; 讓圖片變成塊元素，使得margin屬性能夠生效。margin: 0 auto; 表示左右外邊距都為auto，即自動平分兩側的外邊距，從而實現圖片居中。 如果想要將多張圖片居中，可以將img選擇器改為設置圖片所在元素的class，如下所示：

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

解釋一下這段代碼：將圖片所在元素的文本對齊方式設置為居中（text-align: center;）使得圖片居中。將img設置為內聯塊級元素（display: inline-block;），從而實現多張圖片的塊元素效果。 總結 以上就是使用CSS文件設置圖片居中的方法。在實際應用中，我們需要根據不同的需求進行修改，如修改外邊距大小或選擇不同的圖片元素，以達到更好的視覺效果。