floydman-89
@floydman-89
В постоянном изучении...

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

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

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

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

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

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


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

Теоретически можно использовать оба способа для поддержки совместимости с "не-CSS3-браузерами", применяя modernizr.
  • Вопрос задан
  • 5232 просмотра
Решения вопроса 1
r45her
@r45her
HTML-верстальщик / Frontend разработчик
Не знаю как принято, но лично я чаще использую такой способ:

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

Разумеется, подходит не всегда.
Если поддержка старых браузеров не требуется, то почему бы не использовать флексы?
Ответ написан
Пригласить эксперта
Ответы на вопрос 2
iiiBird
@iiiBird Куратор тега CSS
Пока ты спишь - твой конкурент совершенствуется
еще есть способ создать before который будет задавать центрирование:
.wrapper:before {
	content: "";
	display: inline-block;
	width: 1px;
	height: 100vh;
	margin-left: -1px;
	vertical-align: middle;
}

и остальные элементы в строке можно выравнивать через display: inline-block; vertical-align: middle;
Ответ написан
maxminimus
@maxminimus
просто или ничего
table-cell и vertical-align считаю устаревшими и не испльзую
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
26 сент. 2020, в 15:21
1000000 руб./за проект
26 сент. 2020, в 15:07
1000 руб./за проект
26 сент. 2020, в 14:52
600 руб./за проект