如何將一個 Div 垂直居中於另一個 Div 內？

將一個Div 在另一個Div 中垂直居中

當想要將一個div 在另一個div 中居中時，您的第一個方法可能是使用margin-top 和margin-left 值，如下面的CSS 範例所示：

#outerDiv {
    width: 500px;
    height: 500px;
    position: relative;
}

#innerDiv {
    width: 284px;
    height: 290px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -147px;
    margin-left: -144px;
}

但是，只要內部div的大小發生變化，此方法就需要進行調整。對於更通用的解決方案，我們可以探索以下選項：

垂直居中對齊

使用vertical-align: middle將div在其父容器中垂直對齊。要使用此技術：

1. 設定父容器顯示：table-cell，並使用vertical-align垂直對齊：middle。
2. 設定內部div顯示：inline-區塊。

現代化解：

1.變換

變換提供了更簡單的方法：

1. 將內部div 絕對定位於頂部：50%和左側：50%。
2. 應用變換：翻譯（-50％，-50％）以使div居中尺寸。

2。 Flexbox

Flexbox以其靈活性，提供了最省力的解決方案：

1. 設定父容器顯示：flex。
2. 使用 justify-content ：center 和align-items：將內部div 水平和垂直居中。

您選擇的具體方法將取決於您的相容性要求和偏好。

以上是如何將一個 Div 垂直居中於另一個 Div 內？的詳細內容。更多資訊請關注PHP中文網其他相關文章！