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

在 CSS 中将边距或填充设置为父容器高度的百分比

使用 CSS 垂直对齐元素时，通常需要设置填充或边距占父容器高度的百分比。但是，设置 padding-top，例如，使用百分比值会根据容器的宽度计算该百分比，从而导致当容器的宽度发生变化时垂直对齐对齐。

要克服此限制并将元素垂直对齐为父容器高度的百分比，请考虑以下方法：

不要直接在子元素上设置 padding 或 margin，而是创建一个带有附加内部的嵌套结构div:

<div>
<p>使用顶部或底部的垂直填充或边距设置内部 div 的样式，并将其位置设置为相对或绝对以允许精确放置：</p>
<pre class="brush:php;toolbar:false">.inner-container {
  top: 50%; /* Vertical padding or margin equal to 50% of parent container height */
  position: relative;
}

通过使用在顶部或底部属性中，您可以将垂直填充或边距设置为容器高度的百分比，以确保无论容器的宽度如何，对齐方式都保持一致。