Почему в Chrome не работает вертикальное выравнивание?

Question

[Андрей Федоров]

Вот такой код:
codepen.io/aliencash/pen/oxBxwq

Убирать flex у родителя нельзя.

up: Текст может быть многострочный - line-height нельзя

Answer 1

[Ilya Pavlov]

.text { line-height: 3.4em }

Comments

[Андрей Федоров]

нельзя. текст может быть многострочный.

[Ilya Pavlov]

Андрей Федоров: А высота и ширина именно такие?

[Андрей Федоров]

Илья Павлов: да

[Ilya Pavlov]

Андрей Федоров: ruseller.com/lessons.php?id=1248 - все что есть, выбирайте

[Андрей Федоров]

Илья Павлов: В общем кажется решил. Проблема в том, что обертка ячейки flex. Если обернуть текст в еще один блок table, то все работает как нужно.

[Андрей Федоров]

Илья Павлов: нет, при этом вылезают другие неустранимые артефакты на боевом проекте... (

Answer 2

[Дмитрий]

Так оно само что ли должно?))
Для враппера допишите
justify-content: center
align-items: center

Comments

[Андрей Федоров]

Пробовал. Не работает.

Answer 3

[Максим Гатилин]

Так вы не тот элемент сделали флекс-родителем. Если вам нужно выровнять текст внутри блока с границей - вот рабочий пример.