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

Question

我使用以下方法在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>

虽然这似乎适用于这种情况，但我感到惊讶的是，当我增加或减少我的基础div的宽度时，垂直对齐会突然。我期待当我设置padding-top属性时，它将填充占父容器高度的百分比，这在我们的情况下是基数，但是上面的50％的值是以百分比计算的。宽度。:(

有没有办法将填充和/或边距设置为高度的百分比，而无需使用JavaScript？

Answer 1

的修复程序是肯定的，垂直填充和余量是相对于宽度，但top并bottom&nbsp;不是。所以只需将div放在另一个内部，并在内部div中使用类似的东西top:50%（position如果它仍然不起作用，请记住问题）

Answer 2

以下是模拟所需行为的两个选项。不是一般解决方案，但在某些情况下可能有所帮助。这里的垂直间距是根据外部元素的大小而不是其父元素计算的，但是这个大小本身可以相对于父元素，这样间距也是相对的。<div id="outer">&nbsp; &nbsp; <div id="inner">&nbsp; &nbsp; &nbsp; &nbsp; content&nbsp; &nbsp; </div></div>第一种选择：使用伪元素，这里垂直和水平间距都相对于外部。演示#outer::before, #outer::after {&nbsp; &nbsp; display: block;&nbsp; &nbsp; content: "";&nbsp; &nbsp; height: 10%;}#inner {&nbsp; &nbsp; height: 80%;&nbsp; &nbsp; margin-left: 10%;&nbsp; &nbsp; margin-right: 10%;}将水平间距移动到外部元素使其相对于外部的父级。演示#outer {&nbsp; &nbsp; padding-left: 10%;&nbsp; &nbsp; padding-right: 10%;}第二种选择：使用绝对定位。演示#outer {&nbsp; &nbsp; position: relative;}#inner {&nbsp; &nbsp; position: absolute;&nbsp; &nbsp; left: 10%;&nbsp; &nbsp; right: 10%;&nbsp; &nbsp; top: 10%;&nbsp; &nbsp; bottom: 10%;}

Answer 3

回答一个稍微不同的问题：您可以使用vh单位将元素填充到视口的中心：.centerme {&nbsp; &nbsp; margin-top: 50vh;&nbsp; &nbsp; background: red;}<div class="centerme">middle</div>