如何将边距或填充设置为父容器高度的百分比？
我一直在绞尽脑汁创build一个垂直alignment的CSS使用以下
.base{ background-color:green; width:200px; height:200px; overflow:auto; position:relative; } .vert-align{ padding-top:50%; height:50%; } 并使用下面的div结构。
<div class="base"> <div class="vert-align"> Content Here </div> </div>
虽然这似乎适用于这种情况下，我很惊讶，当我增加或减less我的基本股的宽度，垂直alignment将突然。 我期待，当我设置填充顶部属性，它将填充作为父容器的高度的百分比，这是基于我们的情况，但50％的上述值计算为百分比宽度。 🙁
有没有办法设置填充和/或边距为高度的百分比，而不诉诸使用JavaScript？
提前致谢。
我也有这个问题（+1）。 我非常恼火，这是愚蠢的。
固定的是，垂直填充和边距是相对于宽度，但top和bottom 不是。
所以只要把一个div放在另一个里面，在内部div里面，使用top:50% （如果它仍然不起作用，记住它的position重要）
这里有两个选项来模拟所需的行为。 不是一般的解决scheme，但可能有助于某些情况。 此处的垂直间隔是根据外部元素的大小而不是其父级的大小来计算的，但是这个大小本身可以是相对于父级的，并且这种间距也将是相对的。
<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>
以一行文本为中心的其他方法是：
.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; }
为了使子元素与其父元素绝对定位，需要设置父元素的相对位置和子元素的绝对位置。
然后在子元素的“顶”是相对于父母的高度。 所以你还需要把孩子的身高翻译成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>
50％的填充不会让你的孩子居中，它会把它放在中心以下。 我想你真的想要一个25％的填充顶部。 当你的内容变高时，也许你的空间不足了？ 你也尝试过设置margin-top而不是padding-top吗？
编辑：没关系，w3schools网站说
％指定包含元素的宽度的百分比的填充
所以也许它总是使用宽度？ 我从来没有注意到。
你在做什么可以通过使用display：table来实现（至less对于现代浏览器来说）。 这个技术在这里解释 。
