заполнение дочернего элемента помещает его ниже родительского элемента div

Question

У меня есть div с родительским классом и вложенный внутри родителя. стилизация родителя до

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