使用父容器高度的百分比在CSS 中垂直對齊
為了在CSS 中實現垂直對齊，您採用了以下方法:
.base {
background-color: green;
width: 200px;
height: 200px;
overflow: auto;
position: relative;
}
.vert-align {
padding-top: 50%;
height: 50%;
}雖然最初很有希望，但在調整.base的寬度時，這種方法被證明是有問題的div，導致垂直對齊方式中斷。此行為源自於這樣的事實：padding-top 計算為寬度的百分比，而不是預期的高度。
解決方案：使用垂直屬性
來解決對於這個問題，您可以利用垂直 CSS 屬性而不是 padding-top。這些屬性是相對於父元素的高度定義的：
.base {
background-color: green;
width: 200px;
height: 200px;
overflow: auto;
position: relative;
}
.vert-align {
top: 50%;
position: absolute;
}透過將 top 設定為 50%，您可以有效地將內部 .vert-align div 在 .base 容器內垂直居中。此方法可確保垂直對齊保持完整，無論 .base 的寬度為何。請記住將內部 div 的位置設置為絕對位置才能正常工作。
以上是如何使用百分比高度在 CSS 中實現可靠的垂直對齊？的詳細內容。更多資訊請關注PHP中文網其他相關文章！
