PassFront
  1. PassFront
  2. База знаний
  3. Теги и их категории

Как отцентрировать div через абсолютные свойства?

Теги и их категории

Отцентрировать div через абсолютное позиционирование можно двумя способами: через `transform` или через `inset` и `margin: auto`.

С transform (размер неизвестен)

.parent { position: relative; }
.child {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

top/left: 50% ставит левый верхний угол в центр, а translate(-50%, -50%) сдвигает элемент на половину его размера.

С inset и margin: auto (размер задан)

.child {
  position: absolute;
  inset: 0;
  width: 200px;
  height: 100px;
  margin: auto;
}

Нюансы

  • Родитель должен быть позиционирован (position: relative), иначе центрирование будет относительно страницы.
  • transform с нечётными размерами иногда даёт размытие текста на полпикселя.
  • Для обычной раскладки проще display: grid; place-items: center у родителя.

Коротко для собеседования

position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) или inset: 0; margin: auto с известными размерами; у родителя position: relative.

Подробнее: MDN — Центрирование элемента

Другие вопросы раздела