子元素填充将其向下推到父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变成一个弹性框，你最容易实现的目标。

示例：

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

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

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