當想要將一個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.變換
變換提供了更簡單的方法:
2。 Flexbox
Flexbox以其靈活性,提供了最省力的解決方案:
您選擇的具體方法將取決於您的相容性要求和偏好。
以上是如何將一個 Div 垂直居中於另一個 Div 內?的詳細內容。更多資訊請關注PHP中文網其他相關文章!