Центрирование div в родительском div с absolute в CSS

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

Для вертикального центрирования содержимого можно воспользоваться функционалом flexbox. Установив для внешнего div свойства display: flex; и align-items: center;, дочерний элемент автоматически разместится в центре по вертикале. Это просто!

Пример кода:

<!-- Родительский элемент -->
<div style="position: absolute; display: flex; align-items: center; height: 100%;">
  <!-- Дочерний элемент -->
  <div>
    Я именно посередине!
  </div>
</div>

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

Для поддержки устаревших браузеров, таких как IE9, которые не поддерживают flexbox, пригодится свойство CSS transform.

Пример кода:

<!-- Подготовка к трансформации -->
<div style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);">
  <div>
    Центрирование по вертикале и горизонтале прошло успешно!
  </div>
</div>

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

Работа с элементами inline-block

Если ваши элементы являются inline-block, центрировать их можно с помощью свойства vertical-align: middle;.

Пример кода:

<!-- Родительский элемент -->
<div style="position: absolute; height: 100%; text-align: center; font-size: 0;">
  <!-- Дочерний элемент -->
  <div style="display: inline-block; vertical-align: middle; font-size: 16px;">
    Вот так выглядит центрированный inline-block элемент!
  </div>
</div>

Обнуление font-size у родительского элемента убирает пробелы между строками; в то время как установка размера шрифта у дочернего элемента делает текст снова видимым. Учтите, что vertical-align применяется только к элементам на уровне строки.

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

Центрирование — это, как если бы вы удерживали 🎈, в равновесии внутри 📦.

📦: Ваш родительский div (с абсолютным позиционированием).
🎈: Содержимое, которое нужно вертикально центрировать.

Ищите идеальный баланс:

Верх 🪁   : `top: 50%;`
Трансформация ⚖️: `transform: translateY(-50%);`

В итоге ваш 🎈 окажется прямо в центре 📦.

До: 
📦
  🎈
🪁

После: 
🪁
  📦
  ⚖️🎈

Отлично, получилось то, что нужно!

Другие техники выравнивания

Прием с абсолютным позиционированием

Примените абсолютное позиционирование и управляйте автоматическими отступами.

Пример кода:

<!-- Между верхом, низом, левым и правым краями -->
<div style="position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto;">
  <div style="width: 50%; height: 50%; margin: auto;">
    И вот я — в центре внимания!
  </div>
</div>

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

Трансформация с перспективой

При трансформации изображение может выглядеть немного размытым. Применение свойства perspective(1px) поможет исправить эту ситуацию.

Пример кода:

<!-- Специалист по пиксельному рендерингу -->
<div style="position: absolute; top: 50%; left: 50%; transform: perspective(1px) translate(-50%, -50%);">
  <div>
    Даже после трансформации я выгляжу четко!
  </div>
</div>

Проблемы с пробелами в inline-block

Чтобы решить проблему с пробелами между inline-block элементами, связанными с их добавлением в HTML, сбросьте font-size у родительского элемента.

Пример кода:

<!-- Обработчик пробелов -->
<div style="font-size: 0;">
  <div style="display: inline-block; font-size: 16px;">
    Вот я, первый inline-block элемент…
  </div>
  <!-- исчезающие пробелы -->
  <div style="display: inline-block; font-size: 16px;">
    А здесь мой соседний inline-block элемент, между нами нет пробелов!
  </div>
</div>

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

1. Centering in CSS: A Complete Guide | CSS-Tricks — полное руководство по центрированию в CSS.
2. position – CSS: Каскадные таблицы стилей — об основах позиционирования в CSS.
3. CSS Layout – свойство position – w3schools — подробное изучение абсолютного позиционирования на примерах.
4. A Complete Guide to Flexbox | CSS-Tricks — центрирование с помощью Flexbox.
5. html – Как вертикально центрировать div-элемент для всех браузеров с помощью CSS? – Stack Overflow — варианты решения задачи вертикального центрирования на Stack Overflow.
6. Absolute Horizontal And Vertical Centering In CSS — Smashing Magazine — центрирование по обеим осям.