Центрирование элементов с "position: absolute" в CSS

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

Центрировать элемент с атрибутом position: absolute возможно, присвоив свойствам top и left значение 50% и применив transform с функцией translate(-50%, -50%) для компенсации сдвига на половину его высоты и ширины.

.centered {
  position: absolute;
  top: 50%;
  left: 50%;
  /* коррекция положения элемента */
  transform: translate(-50%, -50%);
}

Добавив класс .centered к элементу в HTML, вы центрируете его относительно родительского блока.

Стратегии точного попадания

Так же, как и при стрельбе меткости, существуют различные подходы к точному центрированию элемента:

Центрирование с использованием свойства margin: auto

Для горизонтального центрирования элемента используется margin: auto. Значения left и right задаются как 0, при этом необходимо указать ширину элемента.

.horizontal-auto-center {
  position: absolute;
  left: 0;
  right: 0;
  width: 100px;
  /* равномерное распределение отступов */
  margin-left: auto;
  margin-right: auto;
}

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

"Метод джедая": отрицательный отступ

Свойству left присваивается 50%, затем из margin-left вычитается половина ширины элемента.

.jedi-center {
  position: absolute;
  left: 50%;
  width: 100px;
  /* использование отрицательного отступа */
  margin-left: -50px;
}

Flexbox как комплексный подход

При использовании Flexbox родительский элемент становится флекс-контейнером, в котором центрируется содержимое.

.shields-up-flex {
  /* включение flexbox */
  display: flex;
  justify-content: center;
  align-items: center;
}

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

Центрирование с абсолютным позиционированием можно представить как размещение кубика Рубика в середине игрового поля судоку:

   ------------------------------
   |                            |
   |        🟩🟦🟧🟪🟨🟥        |
   |                            |
   ------------------------------

Элемент (кубик Рубика – 🟩🟦🟧🟪🟨🟥) идеально центрируется в середине контейнера.

Эпопея о центрировании

Новая надежда: Grid layout

CSS Grid layout приходит на помощь при необходимости работать с динамическим контентом, позволяя легко и точно центрировать элементы.

Месть переполнения

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

Возвращение z-index

Если элемент нежелательно накладывается на другие, аккуратное использование z-index позволяет управлять их визуальным стеком.

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

1. Абсолютное позиционирование внутри относительного | CSS-Tricks — подробное описание вложенного позиционирования.
2. Позиционирование в CSS – MDN — обширный раздел MDN по свойствам позиционирования.
3. Позиционирование в CSS – W3Schools — детальное руководство и примеры использования position.
4. Как центрировать элемент с "position: absolute" – Stack Overflow — обсуждение способов центрирования элементов.
5. Абсолютное центрирование по горизонтали и вертикали в CSS — Smashing Magazine — профессиональные советы по центрированию.
6. Центрирование в CSS: Комплексное руководство | CSS-Tricks — обзор всех способов центрирования объектов.
7. Как центрировать что угодно с CSS – Freecodecamp — практические советы по центрированию элементов.