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

將影像在容器Div 內垂直和水平居中

當希望在較大的div 中精確定位影像時，實現垂直和水平居中水平對齊可能會帶來挑戰。實現此操作的方法如下：

水平對齊：

要將圖像在div 內水平居中，請利用應用於父div 的CSS 的text-align: center 屬性。這會將 div 中的所有內容（包括圖像）居中。

垂直對齊：

實現垂直對齊需要不同的方法。一種有效的技術涉及使用絕對定位：

• 將圖像的位置設置為絕對，表示它相對於其最近定位的祖先（在本例中為父 div）絕對定位。
• 套用保證金：自動；啟用自動邊距，這將使影像在可用空間內居中。
• 將頂部、左側、右側和底部設為 0 可確保影像覆蓋父 div 的整個高度和寬度。

CSS 範例：

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

透過組合水平對齊方式text-align：使用帶邊距的絕對定位進行居中和垂直對齊，您可以在更大的邊界div 內有效地將影像居中。

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