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

我一直在绞尽脑汁创建一个垂直对齐的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？

---

我也有这个问题（+1）。 我对此非常恼火，必须这样做是愚蠢的。

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

所以只需在另一个div中放置一个div，并在内部div中使用top:50% （如果它仍然不起作用，请记住它的position重要）

---

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

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

链接地址: http://www.djcxy.com/p/13255.html

上一篇: How to set the margin or padding as percentage of height of parent container?

下一篇: Issue when centering vertically with flexbox when heights are unknown