Центрирование <div> на странице: горизонтально и вертикально

Быстрый ответ

Для центрирования <div> выберите CSS Flexbox: установите display: flex; для контейнера и добавьте justify-content: center; и align-items: center;. Использование высоты вьюпорта (vh) позволит контейнеру заполнить всю высоту страницы:

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh; /* Откладываем прокрутку */
}

.centered {
  width: 50%; /* Достраиваем под себя */
  height: 50%; /* Достраиваем под себя */
}

Ваш HTML может выглядеть так:

<div class="container">
  <div class="centered">Гармония обретена...</div>
</div>

Этот метод прост в применении и поддерживается большинством браузеров.

Абсолютное позиционирование и автоматические отступы

Если Flexbox вам не подходит, вы можете воспользоваться абсолютным позиционированием и автоматическими отступами для центрирования div:

.center-absolute {
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  margin: auto;
  width: 50%; /* Ограничиваем размер */
  height: 50%; /* Высоту можно скорректировать */
}

Благодаря автоматическим отступам, div центрируется автоматически — это простое и универсальное решение. Однако, учтите, что IE 7 его не поддерживает, в отличие от других современных браузеров.

Точное позиционирование с трансформацией

Если вам требуется работать с абсолютно или фиксированно позиционированными элементами, transform: translate(-50%, -50%) может пригодиться. Это сдвигает элемент на 50% от его размеров, тем самым идеально центрируя его:

.center-transform {
  position: absolute; /* Или fixed */
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); /* Настройка под себя */
}

Не забудьте проверить совместимость функции transform с различными браузерами и при необходимости использовать префикс -webkit-transform.

Центрирование неподвижных элементов

Для центрирования статичного элемента, который не должен прокручиваться, замените position: absolute; на position: fixed;, и вуаля: у вас есть центрированный блок, который во время прокрутки остается на месте:

.center-fixed {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); /* Думаем трансформациями */
}

При работе со старыми версиями браузеров возможно потребуется применять более архаичные методы центрирования с фиксированными размерами, либо включать JavaScript.

Гибкость с Flexbox

Flexbox не только облегчает центрирование, но и предоставляет возможность эффективно организовать элементы внутри родительского контейнера. Установка фиксированного размера для родительского элемента и гибкий механизм настройки потомков позволяют легко корректировать размеры и подстройку контента:

.container-flex {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%; /* Растягиваем на весь экран */
  height: 100vh; /* Высота во всю доступную высоту */
}

.child-flex {
  flex: 0 1 auto; /* Мы адаптивны */
  background: cyan;
}

W3Schools, MDN и CSS-Tricks станут надежными источниками знаний о Flexbox.

Центрирование с помощью CSS Grid

CSS Grid также отличное решение для центрирования. Он предоставляет возможность горизонтального и вертикального центрирования в рамках сетки:

.container-grid {
  display: grid;
  place-items: center; /* place-items -- наше все в CSS */
  height: 100vh;
}

.centered-grid {
  width: 50%; /* Настраиваем под себя */
  height: 50%; /* Подходим гибко */
}

Свойство place-items: center; в сочетании с CSS Grid служит верным помощником для центрирования элементов, без необходимости указывать фиксированные размеры.

Визуализация

Вообразите, что ваш <div> — это произведение искусства. Оно заслуживает центрального места на стене:

Сцена: Ваша 🖼️ висит случайным образом...

// Горизонтальное центрирование:
🧱🪝--------------🖼️-------------🪝🧱

// Вертикальное центрирование:
🧱
|
🧱
|        🖼️ (Висит)
🧱
|
🧱

Цель — расположение картин (или <div>) таким образом, чтобы они центрированы были как по горизонтали, так и по вертикали:

🧱🪝--------🖼️--------🪝🧱
           |
🧱        🖼️ (Ощущение, будто вы на выставке, верно?)
           |
🧱🪝--------🖼️--------🪝🧱

Как и в визуальном искусстве, грамотное размещение контента повышает эстетическую привлекательность веб-страницы.

Устранение проблем с центрированием

Если вам не удается центрировать элемент, попробуйте следующее:

• Убедитесь, что родительские элементы не ограничивают размеры или позиционирование центрируемого div.
• При использовании Flexbox, проверьте, чтобы настройки flexbox элементов не выбивали контент из центра.
• Для transform проверьте, нет ли в нем конфликтующих CSS-правил, которые могут помешать позиционированию.
• В сеточных макетах убедитесь, что div без непосредственных ограничений встраивается в сетку, и что внутренние сетки не создают проблем с выравниванием.

Полезные материалы

1. Центрирование в CSS: полное руководство | CSS-Tricks — детальный обзор всех подходов к центрированию в CSS.
2. Центрирование элемента – CSS: Каскадные таблицы стилей | MDN — фундаментальное руководство по использованию CSS для центрирования элементов.
3. CSS Flexbox (Flex-контейнеры) — ознакомьтесь здесь с основами Flexbox.
4. Определение областей сетки — пример центрирования с применением CSS Grid.
5. html – Как центрировать элемент по горизонтали и вертикали – Stack Overflow — разнообразные методы центрирования <div> от сообщества Stack Overflow.
6. Can I use... Таблицы поддержки для HTML5, CSS3, и т.д. – информация о совместимости Flexbox с различными браузерами.