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

50％的填充不会使您的孩子居中，它将放置在中心下方。我认为您真的希望填充率达到25％。也许随着内容的增加，您的空间即将用完？您是否也尝试过设置margin-top而不是padding-top？

编辑：没关系，w3schools网站说

％指定包含元素宽度的填充百分比

所以也许它总是使用宽度？我从没注意到。

可以使用display：table来实现您正在做的事情（至少对于现代浏览器而言）。该技术在这里进行说明。

这可以通过该writing-mode属性来实现。如果将元素设置writing-mode为垂直书写模式（例如）vertical-lr，则其后代在两个维度上的填充和边距百分比值将相对于高度而不是宽度。

从规格：

。。。在CSS2.1中始终相对于包含块宽度计算的边距和填充属性百分比是在CSS3中相对于包含块的内联大小计算的。

内联大小的定义：

A measurement in the inline dimension: refers to the physical width (horizontal dimension) in horizontal writing modes, and to the physical height (vertical dimension) in vertical writing modes.

Example, with a resizable element, where horizontal margins are relative to width and vertical margins are relative to height.

.resize {
  width: 400px;
  height: 200px;
  resize: both;
  overflow: hidden;
}

.outer {
  height: 100%;
  background-color: red;
}

.middle {
  writing-mode: vertical-lr;
  margin: 0 10%;
  width: 80%;
  height: 100%;
  background-color: yellow;
}

.inner {
  writing-mode: horizontal-tb;
  margin: 10% 0;
  width: 100%;
  height: 80%;
  background-color: blue;
}

<div class="resize">
  <div class="outer">
    <div class="middle">
      <div class="inner"></div>
    </div>
  </div>
</div>

Using a vertical writing mode can be particularly useful in circumstances where you want the aspect ratio of an element to remain constant, but want its size to scale in correlation to its height instead of width.

为了使子元素绝对位于其父元素之外，您需要在父元素上设置相对位置，并在子元素上设置绝对位置。

然后在子元素上，“ top”相对于父元素的高度。因此，您还需要向上“平移”孩子身高的50％。

.base{
    background-color: green;
    width: 200px;
    height: 200px;
    overflow: auto;
    position: relative;
}
    
.vert-align {
    position: absolute;
    top: 50%;
    transform: translate(0, -50%);
}

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

还有一个使用弹性盒的解决方案。

.base{
    background-color:green;
    width: 200px;
    height: 200px;
    overflow: auto;
    display: flex;
    align-items: center;
}

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

您会发现两者的优点/缺点。

这是两个模拟所需行为的选项。这不是一个通用的解决方案，但在某些情况下可能会有所帮助。此处的垂直间距是根据外部元素的大小（而不是其父元素）的大小计算的，但是此大小本身可以相对于父元素，因此间距也是相对的。

<div id="outer">
    <div id="inner">
        content
    </div>
</div>

第一种选择：使用伪元素，此处垂直和水平间距是相对于外部的。演示版

#outer::before, #outer::after {
    display: block;
    content: "";
    height: 10%;
}
#inner {
    height: 80%;
    margin-left: 10%;
    margin-right: 10%;
}

将水平间距移动到外部元素会使其相对于外部元素的父元素。演示版

#outer {
    padding-left: 10%;
    padding-right: 10%;
}

第二种选择：使用绝对定位。演示版

#outer {
    position: relative;
}
#inner {
    position: absolute;
    left: 10%;
    right: 10%;
    top: 10%;
    bottom: 10%;
}

一个稍微不同的问题的答案：您可以使用vh单位将元素填充到视口的中心：

.centerme {
    margin-top: 50vh;
    background: red;
}

<div class="centerme">middle</div>

解决方法是，是的，垂直填充和边距与宽度有关，而top与宽度bottom 无关。

因此，只需将div放置在另一个div内，然后在内部div中使用类似的命令即可top:50%（请记住，position如果它仍然无法正常工作）