Вертикальный выравнивающий текст внутри контейнера с CSS

Question

Я довольно новичок в CSS, и я пытаюсь по вертикали выровнять: средний текст внутри div. Раньше это было задано, но я не могу найти решение для меня, поэтому я должен упустить что-то очевидное.

Я пробовал:

Имея текст в <p> тега и в CSS, добавляя vertical-align: middle; к <p> тега.

Имея текст в теге <p> и в CSS добавляя vertical-align: middle; к родительскому div.

Имея текст в <div class="flex-container"> и в CSS, добавив

.flex-container { 
display: flex; 
justify-content: center; 
align-items: center; 
} 

Как здесь: https://jsfiddle.net/dt3kvmdm/

Родитель DIV не имеет высоту починки в пикс. Вместо этого это процент. Одно из решений аналогичного вопроса предполагало, что это может быть проблемой, но я не понимаю. Мне было бы полезно сохранить его в процентах.

Я буду очень рад услышать любые предложения!

Большое спасибо!

Ник.

Answer 1

Вы должны использовать display: flex на родительском элементе или набор height: 100% на дочернем элементе Fiddle

.ProjectTitle { 
 
    background-color: green; 
 
    position: absolute; 
 
    width: 100%; 
 
    height: 20%; 
 
    bottom: 0; 
 
    display: flex; 
 
    justify-content: center; 
 
    align-items: center; 
 
} 
 
.flex-container { 
 
    font-family: "Taviraj", serif; 
 
    color: #000; 
 
    letter-spacing: 0.11em; 
 
}

<div class="ProjectTitle"> 
 
    <div class="flex-container"> 
 
    Project Title 
 
    </div> 
 
</div>

Answer 2

Я не уверен, если я полностью понимаю, что вы хотите, но если посмотреть это помогает:

HTML:

<div class="ProjectTitle"> 
    <div class="flex-container"> 
     <p>Project Title</p> 
    </div> 
</div> 

CSS:

.ProjectTitle { 
    background-color: green; 
    position: absolute; 
    width: 100%; 
    height: 20%; 
    bottom: 0; 
} 

.flex-container { 
    display: flex; 
    justify-content: center; 
    align-items: center; 
    font-family: "Taviraj", serif; 
    color: #000; 
    letter-spacing: 0.11em; 
    line-height: 20%; 
    height: 100%; 
} 

.flex-container p { 
    color: #ffffff; 
    vertical-align: middle; 
} 

Fiddle: https://jsfiddle.net/dt3kvmdm/1/