如何使用百分比高度在 CSS 中實現可靠的垂直對齊？

使用父容器高度的百分比在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中文網其他相關文章！