為什麼基於百分比的垂直填充失敗，以及如何在 CSS 中使用百分比高度進行垂直對齊？

如何使用父容器高度的百分比控制內邊距和邊距

在CSS 中，可以使用padding-top 來控制垂直對齊財產。但是，將此屬性設為父容器寬度而不是高度的百分比可能會導致不良行為。

原始嘗試：

.base {
  background-color: green;
  width: 200px;
  height: 200px;
  overflow: auto;
  position: relative;
}

.vert-align {
  padding-top: 50%;
  height: 50%;
}

意外行為：

更改.base 容器的寬度時，即使將pad -top 設定為百分比，垂直對齊也會被捕捉。這是因為垂直內邊距和邊距是按父容器寬度的百分比計算的。

解：

不要使用 padding-top，而是使用 top 屬性來控制垂直對齊。 top 計算為父容器高度的百分比。

.base {
  background-color: green;
  width: 200px;
  height: 200px;
  overflow: auto;
  position: relative;
}

.vert-align {
  position: absolute;
  top: 50%;
}

此巢狀div 結構將子div 放置在父容器內並垂直對齊：

<div class="base">
  <div class="vert-align">
    Content Here
  </div>
</div>

透過使用top子div 的位置不是其父容器頂部的50% ，而不是padding-top，無論其寬度如何。即使父級的寬度發生變化，這也可以確保垂直對齊。

以上是為什麼基於百分比的垂直填充失敗，以及如何在 CSS 中使用百分比高度進行垂直對齊？的詳細內容。更多資訊請關注PHP中文網其他相關文章！