如何使用百分比高度在 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中文网其他相关文章！