如何使圖像在 Div 中垂直和水平居中？

將圖像在較大的Div 中居中（垂直和水平）

網頁設計中的一個常見要求是將圖像在較大型的Div 中居中分區雖然可以使用文字對齊方式實現水平居中，但垂直對齊可能更具挑戰性，特別是在跨瀏覽器相容性方面。

解決方案：

將影像水平居中在垂直方向上，在較大的 div 內，可以結合使用絕對定位和自動邊距。絕對定位允許影像相對於其父元素定位，而自動邊距可確保元素水平和垂直居中。

以下是實現此解決方案的CSS 程式碼：

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

此程式碼將影像絕對定位在較大的div 內，並將其頂部、底部、左側和右側邊距設定為自動。這可確保影像在 div 內垂直和水平居中。

注意：

此解決方案適用於支援自動調整的現代瀏覽器 (IE >= 8)利潤。對於較舊的瀏覽器，可能需要使用 Flexbox 或 CSS 網格等替代解決方案才能達到所需的效果。

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