← Все вопросы
Как отцентрировать блок по центру экрана (и по горизонтали, и по вертикали)?
21
Есть div с текстом, хочу чтобы он был ровно в центре страницы и по ширине, и по высоте. Видел кучу способов с margin, position, но всё время что-то не так. Как сделать по-человечески в 2026?
5 ответов
38
✓ Принятый ответ — помог автору
Самый простой способ — flexbox на родителе:
.parent {
display: flex;
justify-content: center; /* по горизонтали */
align-items: center; /* по вертикали */
height: 100vh; /* чтобы родитель занял весь экран */
}
Главное — не забыть высоту родителю (100vh = вся высота окна), иначе центрировать по вертикали будет нечего: блок прижмётся к верху. Сам центрируемый блок трогать не надо.
Dmitry Permiakou вот про 100vh и был мой косяк, спасибо 🙏 · 12 месяцев назад
Дмитрий Цмыг автор: то что надо, принято · 12 месяцев назад
15
Можно ещё через grid в одну строчку:
.parent {
display: grid;
place-items: center;
height: 100vh;
}
place-items: center центрирует сразу по обеим осям. Лично мне это даже короче flex'а нравится.
6
Флексбоксом.
0
body { display: flex; justify-content: center; /* Центр по горизонтали / align-items: center; / Центр по вертикали */ min-height: 100vh; margin: 0; }
-5
Сделай margin: 0 auto и всё.
Сергей Ерошевич это центрирует только по горизонтали и только при заданной ширине, по вертикали не сработает · 12 месяцев назад
Ваш ответ
Войдите, чтобы ответить на вопрос.