如何使用 CSS 將圖片在容器內垂直居中？

將圖像在容器內垂直居中

前端開發中的一個常見挑戰是將圖像在較大容器內垂直居中。使用 text-align: center 時，可以輕鬆實現水平居中，但垂直對齊仍然難以實現。

使用絕對定位的解決方案

可靠的解決方案涉及利用絕對定位與自動邊距結合使用。絕對定位允許我們根據其父元素精細地控製圖像的位置。設定自動邊距（使用 margin: auto）可以有效地使影像水平和垂直居中。

程式碼範例

以下CSS 程式碼示範了這種方法：

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

因此，無論容器的高度或寬度如何，影像都高度將定位在其父容器的正中心。此方案相容於舊版瀏覽器（IE >= 8），有效解決垂直對齊問題。

以上是如何使用 CSS 將圖片在容器內垂直居中？的詳細內容。更多資訊請關注PHP中文網其他相關文章！