如何在 Div 內垂直和水平居中影像？

在較大的Div 中將影像垂直和水平居中

將影像嵌入到較大的div 中時，確保其正確對齊至關重要。垂直居中尤其具有挑戰性。以下是如何有效實現水平和垂直居中：

帶自動邊距的絕對定位

一種有效的方法是使用帶自動邊距的絕對定位。此技術可讓您將影像在 div 內水平和垂直居中，即使在包含的 div 缺乏固定高度的情況下也是如此。

要實現此解決方案：

1. 給出圖像絕對定位使用position:absolute;。
2. 設定margin 屬性為 auto；允許瀏覽器自動調整邊距。
3. 指定 top、left、right 和 bottom 值為 0。這指示影像佔據其父級的整個空間div.

以下是範例程式碼片段：

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

使用此技術，無論div 的高度如何，影像都會在div 內垂直和水平居中。

以上是如何在 Div 內垂直和水平居中影像？的詳細內容。更多資訊請關注PHP中文網其他相關文章！