Центрирование DIV в CSS: без потери содержимого
Быстрый ответ
Оптимальный подход к центрированию DIV по горизонтали и вертикали — использовать тип отображения Flexbox в CSS. Родительскому элементу назначаем стили display: flex
, justify-content: center
, align-items: center
. Чтобы блок занимал всю высоту экрана, применяем height: 100vh
.
<style>
.centered-container {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
</style>
<div class="centered-container">
<div>Ваш контент центрирован 🎯</div>
</div>
Таким образом, содержимое строго выравнивается по центру блока .centered-container
, независимо от размера вашего экрана.
Обратная совместимость и адаптивный дизайн
Flexbox отлично поддерживается всеми современными браузерами, однако для старых версий есть альтернативное решение: использовать технику таблиц при помощи display: table
, display: table-cell
, text-align: center
, vertical-align: middle
.
Адаптивность дизайна можно усилить, применив max-width: 100%
и max-height: 100%
, чтобы блок не выходил за границы экрана. А overflow: auto
добавит возможность прокрутки, если это потребуется на устройствах с маленькими экранами.
Использование свойства position: fixed
может пригодиться при работе с модальными окнами, однако нельзя увлекаться этим подходом.
Визуализация
Представим ситуацию: вам необходимо отцентрировать блок DIV на странице.
🖼️ Стена
|
| xXx —— Тут будет гвоздь, точно по центру.
|
Теперь выразим это при помощи CSS:
.center-div {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
Ваш HTML будет выглядеть следующим образом:
<div class="center-div">
<div>🖼️</div>
</div>
И вот как волшебство, ваш контент помещён в центр страницы как визуально, так и структурно.
Точное и эстетическое центрирование
Центрирование — не только функциональная задача, но и процесс творчества. Чтобы контейнер выглядел точно так, как вам хочется, подстройте background-color
, width
и height
.
Совет: по возможности избегайте устаревших методов, наподобие абсолютного позиционирования с отрицательными отступами, которые могут скрывать часть контента. В мире CSS вы — художник, поэтому позвольте магии CSS (margin: auto
) позаботиться о центрировании вашего контента.
Старый метод: табличные свойства в CSS
До появления flexbox использовалось много различных подходов. Вот как вы бы центрировали DIV задолго до flexbox:
.table-center-wrapper {
display: table;
width: 100%;
}
.centered-content {
display: table-cell;
text-align: center;