Центрирование 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;