为什么基于百分比的垂直填充失败，以及如何在 CSS 中使用百分比高度进行垂直对齐？

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

在 CSS 中，可以使用 padding-top 来控制垂直对齐财产。但是，将此属性设置为父容器宽度而不是高度的百分比可能会导致不良行为。

原始尝试：

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

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

意外行为：

更改 .base 容器的宽度时，即使将 padding-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中文网其他相关文章！