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

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 不是。

所以只需将div放在另一个内部，并在内部div中使用类似的东西top:50%（position如果它仍然不起作用，请记住问题）

Answer 2

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

<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%;

}

Answer 3

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

.centerme {

    margin-top: 50vh;

    background: red;

}

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