如何用CSS將圖像居中顯示在HTML頁面中

在網頁設計和開發中，圖像一般都是不可或缺的元素，用適當的邊距讓圖像居中顯示，可以讓頁面更加美觀並提高用戶體驗。本文將介紹如何使用CSS以及HTML的特性來讓圖像在頁面中居中顯示，不用依賴JavaScript或其他工具。

一、使用text-align將行內圖像居中

行內圖像是通過標籤插入頁面中的圖像，與頁面上的文字混排。通常，我們可以使用text-align屬性來將行內圖像居中顯示。text-align有兩個值：center和justify。

img {
    display: inline-block;
}

.container {
    text-align: center;
}

為了在塊級元素中放置行內元素，需要將圖像的display屬性設置為inline-block。接著，使用text-align屬性將圖像的父元素中央對齊即可。這個方法對於只有單個圖像的情況非常適用。

二、使用margin將塊級圖像居中

塊級圖像是佔據整行的元素。通過使用margin屬性來實現塊級圖像的居中。對於已知寬度的塊級圖像，我們可以通過設置margin-left和margin-right來讓它居中。

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

將圖像的display屬性設置為block，並通過margin-left和margin-right將圖像在其容器中進行居中。設置margin: 0 auto;可以使瀏覽器自動計算左、右邊距，從而實現水平居中。

三、使用position將任何類型的圖像居中

position屬性可以將元素相對於其定位父元素進行定位。通過將圖像的position屬性設置為absolute，left和right屬性設置為0，top和bottom屬性設置為0，我們可以實現任何類型的圖像水平垂直居中。

.container {
    position: relative;
}

img {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
}

在圖像的容器中，將position屬性設置為relative。接著，在圖像的樣式中將position屬性設置為absolute，將寬度和高度設置為圖像的實際寬度和高度，然後使用top，bottom，left和right屬性將圖像相對於其定位父元素進行定位。最後，將margin屬性設置為auto，讓圖像在其容器的中央進行水平和垂直居中。

結論

不同類型的圖像需要使用不同的技巧來進行居中。行內圖像使用text-align:center，塊級圖像使用margin：0 auto，任何類型的圖像使用position:absolute。以上這些技巧可以用CSS輕鬆實現圖像的居中，並且不需要依賴JavaScript。