这是一个非常有趣的bug。(在我看来，这是一个bug)很好的发现!

至于如何设置，我推荐Camilo Martin的答案。至于为什么，如果你们不介意的话，我想解释一下。

在CSS规范中，我发现:

“填充” 百分比:指包含块的宽度

这很奇怪，不过没关系。

因此，父宽度:210px，子padding-top: 50%，我得到padding-top的计算值:96.5px -这不是预期的105px。

这是因为在Windows中(我不确定其他操作系统)，普通滚动条的大小默认为17px × 100%(或100% × 17px的水平条)。这些17px在计算50%之前被减去，因此193px的50% = 96.5px。

50%的填充不会居中你的子元素，它会把它放在中心下方。我觉得你需要25%的缓冲。也许你只是因为你的内容越来越高而没有空间了?你有没有试过设置边距顶部而不是填充顶部?

编辑:没关系，w3schools网站说

以包含元素宽度的百分比为单位指定填充

也许它总是使用宽度?我从没注意过。

你所做的事情可以通过display:table来实现(至少对于现代浏览器是这样)。这里将解释该技术。

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

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

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

将一行文本居中的另一种方法是:

.parent{
  position: relative;
}

.child{
   position: absolute;
   top: 50%;
   line-height: 0;
}

或者只是

.parent{
  overflow: hidden; /* if this ins't here the parent will adopt the 50% margin of the child */
}

.child{
   margin-top: 50%;
   line-height: 0;
}

修正是，是的，垂直填充和边距是相对于宽度，但顶部和底部不是。

所以只要把一个div放在另一个div里面，在里面的div中，使用像top:50%这样的东西(记住位置很重要，如果它仍然不起作用)

为了使子元素的位置绝对依赖于它的父元素，你需要设置父元素的相对位置和子元素的绝对位置。

然后在子元素上'top'是相对于父元素的高度。所以你还需要把孩子的身高向上平移50%。

.base { 背景颜色:绿色; 宽度:200 px; 身高:200 px; 溢出:汽车; 位置:相对; ｝ .vert-align { 位置:绝对的; 上图:50%; 转换:翻译(0，-50%); ｝ < div class = "基地" > < div class = " vert-align”> 内容在这里 < / div > < / div >

还有一种解决方案是使用伸缩盒。

.base { 背景颜色:绿色; 宽度:200 px; 身高:200 px; 溢出:汽车; 显示:flex; 对齐项目:中心; ｝ < div class = "基地" > < div class = " vert-align”> 内容在这里 < / div > < / div >

你会发现两者都有优点/缺点。