Как вертикально выровнять текст внутри элемента , который является гибким элементом [дубликат] ⇐ CSS

[Anonymous]

У меня есть следующий макет:

Код: Выделить всё

div {
display: flex;
flex-direction: column;
height: 300px;
width: 300px;
align-items: stretch;
}

p {
flex-grow: 1;
text-align: center;
background-color: aqua;
}


blah

Есть ли способ центрировать ' текст вертикально? Я пробовал использовать display: table-cell вертикальное выравнивание: middle, но это не сработало. Есть идеи?

Подробнее здесь: https://stackoverflow.com/questions/793 ... -flex-item