子元素填充将其向下推到父 div 下方

Question

我有一个带有父类的 div 和一个嵌套在父类中的 p。将父级样式设置为

.parent {
   width: 100%;
   height: 500px;
   background: red;
}

和子元素到

.parent p {
   padding-top: 50%;
}

使子元素低于父 div。 假设 p 段落应该在其上方添加 50% 的填充，从而位于父 div 的中心。即使我用边缘顶部替换填充，它仍然会产生同样奇怪的结果。

Answer 1

目前，padding-top: 50% 正在获取 50% 的宽度，而不是容器的高度。 通过将 div 变成 flexbox 可以最轻松地实现您所追求的目标。

例子：

.parent {
   width: 100%;
   height: 150px;
   background: red;
   display: flex;
   align-items: center;
}

<div class="parent">
    <p>Example Text</p>
</div>

如果您也希望文本水平居中，您可以将justify-content: center; 添加到 .parent 类中。