如何在 CSS 中使用基于父容器高度的百分比填充或边距？

如何将填充或边距设置为父容器高度的百分比

当尝试使用 CSS 垂直对齐元素时，这似乎是合乎逻辑的将 padding-top 或 margin-top 属性设置为父容器高度的百分比。但是，使用 padding-top 和 margin-top 百分比会产生相对于容器宽度的值，从而在容器宽度更改时导致意外行为。

解决方案

要将内边距或边距设置为父容器高度的百分比，请避免使用 padding-top 和 margin-top。相反，设置父容器内元素的 top 或 Bottom 属性。

`

height: 200px;

}

.子元素{

position: absolute;
top: 50%;

}

<div>

<div>

`

说明

通过使用 top 属性，子元素的位置现在相对于父容器的高度，确保垂直对齐保持一致，无论容器的宽度如何。

以上是如何在 CSS 中使用基于父容器高度的百分比填充或边距？的详细内容。更多信息请关注PHP中文网其他相关文章！