Центрирование <div> и <table> на экране: CSS-решение

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

Если вам необходимо центрировать элемент <div> на экране, можно воспользоваться гибкими возможностями CSS flexbox. Примените к родительскому <div> стили display: flex, justify-content: center и align-items: center, обозначая их так:

.center-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

Затем, поместите ваш контент внутрь .center-container:

<div class="center-container">
  <div>Ваш контент здесь — прямо в центре!</div>
</div>

Таким образом, ваш контент будет равномерно расположен по центру как по вертикали, так и по горизонтали.

Детали позиционирования с помощью CSS

Основы позиционирования

Flexbox — достаточно современный и эффективный способ центрирования. Однако, традиционные методы все еще актуальны. Ниже мы рассмотрим, каким образом <div> может оказаться в центре внимания.

Подробнее об этом расскажет наш спикер на видео

Классическое абсолютное центрирование

Абсолютное позиционирование требует знания размеров элемента. Особенно важно использование transform для коррекции смещения.

.center-absolute {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 300px;
  height: 150px;
  transform: translate(-50%, -50%);
}

Центрирование с применением "гибкого каркаса"

Данный метод предлагает подход, позволяющий более свободно позиционировать элемент при переменных его размерах, при этом сохраняя его в центре.

.center-flexible {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  width: 50%;
  height: 50%;
}

Продвинутое центрирование для уверенных пользователей

Дерзкое центрирование с фиксированным позиционированием

Установите position: fixed, если требуется зафиксировать элемент в области viewport, независимо от прокрутки страницы. Этот подход актуален, например, при создании модальных окон.

.center-fixed {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

Имейте в виду возможные перекрытия с другим содержимым — используйте такой метод с осмотрительностью.

Абсолютное центрирование с автоматическими отступами margin: auto

Абсолютное позиционирование с margin: auto создаст эффект содержимого, как бы парящего в воздухе.

.center-margin-auto {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  width: 200px;
  height: 200px;
}

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

Центрирование нового поколения: CSS Grid

CSS Grid позволяет выполнить центрирование совсем просто, используя всего одно свойство:

.grid-container {
  display: grid;
  place-items: center;
  height: 100vh;
}

Так, центрирование становится проще, чем когда-либо!

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

Следующую схему можно использовать как песочницу для ваших тестов:

┌─────────────────┐
│                 │
│                 │
│       🛸        │
│                 │
│                 │
└─────────────────┘

Здесь рамка отображает экран, внутренний прямоугольник — родительский <div>, а 🛸 — центрируемый дочерний <div>.

.screen {
  display: flex;
  justify-content: center;
  align-items: center;
}

И вот, 🛸 ровно посередине!

Учитывание реальных условий

Адаптивность: каждый пиксель имеет значение

Учитывая различие размеров экранов, ваш дизайн должен быть адаптивным. Для совершенствования отображения на разных устройствах используйте медиа-запросы .

Уважение к пользователям со старыми браузерами

Не забывайте обладателей старых версий браузеров — ваша работа будет воспринята с благодарностью, если вы предложите альтернативы современным CSS-свойствам.

Использование обёрток <div> для сложных макетов

Если задача центрирования кажется более сложной, чем простое расположение одного элемента по центру, вы можете использовать дополнительные <div>, что облегчит процедуру компоновки и управления стилями.