Вертикальное выравнивание: display: flex или display: table-cell?

Question

[Илья Савельев]

Народ всем привет.

Собственно вопрос такой: какой из способов вертикального выравнивания вы используете:

height: 100vh;
display: table-cell;
vertical-align: middle;

или через flex-модель:

width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;

Какой из этих способов в данный момент является более предпочтительным и является "правилом хорошего CSS-тона" ?

Теоретически можно использовать оба способа для поддержки совместимости с "не-CSS3-браузерами", применяя modernizr.

Answer 1

[Олег]

Не знаю как принято, но лично я чаще использую такой способ:

position: absolute;
top: 50%;
transform: translateY(-50%);

Разумеется, подходит не всегда.
Если поддержка старых браузеров не требуется, то почему бы не использовать флексы?

Comments

[Илья Савельев]

А чем обусловлен твой выбор?

[Олег]

Илья Савельев: это довольно универсально, неважно какая высота у центрируемого элемента, или у его контейнера.
Ну а если высота элемента известна и постоянна (например 100px), то можно вместо transform просто задать ему margin-top: -50px. Это будет более кроссбраузерно.
Флексы тоже использую, довольно удобная штука, но опять же проблемы со старыми браузерами.
Ну а вариант с table-cell как-то не довелось использовать. Не буду говорить, хороший он или плохой.

Answer 2

[iBird Rose]

еще есть способ создать before который будет задавать центрирование:

.wrapper:before {
	content: "";
	display: inline-block;
	width: 1px;
	height: 100vh;
	margin-left: -1px;
	vertical-align: middle;
}

и остальные элементы в строке можно выравнивать через display: inline-block; vertical-align: middle;