Вертикальное центрирование div в CSS, поддержка IE6

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

Flexbox выступает в качестве универсального решения проблем верстки, включая задачу вертикального выравнивания. Реализация этого действительно проста – примените значения display: flex и align-items: center к родительскому контейнеру и исходное содержание будет выровнено по центру:

div {
  display: flex; /* Неоценимая сила Flexbox */
  align-items: center; /* "Valar Alignis" – все элементы должны быть выровнены */
  height: 100vh; /* Мы действительно обожаем использовать полные высоты */
}

<div>
  <div>Привет, Средиземье!</div>
</div>

Внутренний div обретает свое место точно посередине, восклицая – ♫ Я нахожусь в центре всего ♫.

Разные подходы // Несколько существующих методов выравнивания div

Метод использования свойств таблицы в CSS

Еще до наступления эпохи Flexbox, веб-разработчики решали задачи выравнивания при помощи свойств таблиц CSS. Конечно, использование таблиц для выравнивания сегодня может показаться архаичным, но это исторический способ.

parent-div {
  display: table; /* Имитируем HTML таблицы, привет из 90-х! */
  height: 100%; /* Адаптируемся под родительский элемент */
}

child-div {
  display: table-cell; /* Мощь структуры таблицы во вложенном элементе */
  vertical-align: middle; /* Здесь тоже работает "Valar Alignis" */
}

Используем эти классы в разметке:

<div class="parent-div">
  <div class="child-div">Центрирование никогда не было так приятно устаревшим</div>
</div>

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

Настоящая власть властей в CSS

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

div {
  position: absolute; /* Определено место и положение */
  top: 50%; left: 50%; /* Точка пересечения между образами */
  transform: translate(-50%, -50%); /* Магия центрирования */
  width: 50%; /* Выбор за вами */
}

Примените эти стили к нужному div:

<div>Я появился ровно посередине с тобой</div>

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

CSS Grid – современный подход

Хотите работать с последними технологиями? CSS Grid – это еще один прекрасный способ центрирования:

div {
  display: grid; /* Приветствуем вас в будущем */
  place-items: center; /* Хогвартс, переместите нас в центр! */
  height: 100vh; /* Мы все еще обожаем полные высоты */
}

Примените стили к вашему div:

<div>Помощь, я застрял посередине!</div>

Работа с переменчивым содержанием // Управление динамическими изменениями

Простые методы адаптации дизайна

Укажите контенту, что нужно адаптироваться при изменении его размеров, используя относительные единицы и минимальные/максимальные свойства значений:

div {
  max-width: 90%; /* Ограничиваем пространство или расширяем границы? */
  max-height: 80vh; /* Адаптируемся под обстоятельства, подобно хамелеону */
  margin:auto; /* Добавим немного магии выравнивания */
}

Контроль над переполнением – поддерживаем все в рамках

Переполнение – это дух анархии, не признающий никаких правил. Укротите его с помощью overflow: auto:

div {
  overflow: auto; /* Беззаконие не тот путь, которым мы должны идти */
}

Динамическое выравнивание – проявление гибкости

Для содержимого с непостоянными размерами следует подготовиться к динамическим вариациям:

div {
  display: flex; /* Поддерживаем порядок */
  align-items: center; /* Выравнивание по центру – это всегда актуально */
  height: auto; /* Оставим решение за контентом */
}

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

В данной иллюстрации показано, как работает вертикальное центрирование в CSS:

На экране: |-------------------------|
             |                         |
             |          🎯            |
             |                         |
             |-------------------------|

Эквивалент CSS: display: flex; align-items: center; justify-content: center;

Мишень – 🎯 это div-элемент, идеально центрированный беспристрастно к величине области просмотра. Это секрет отличного выравнивания каждый раз! 👌

Особенности работы с выравниванием

Проверяем совместимость с браузерами – будет ли функционировать выравнивание?

Применение решения – это только первый этап, затем следует проверка. Всегда тестируйте свой код в различных браузерах, чтобы убедиться в его совместимости.

Старые браузеры

Использование новейших возможностей CSS – это здорово, но следует помнить о старых браузерах. Для них верно возвращение к традиционным методам.

Доступность для всех – обеспечение четкости

Убедитесь, что ваш выровнянный контент является структурно понятным для специализированных технологий. Не портите доступность ради внешней привлекательности.

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

1. Выравнивание в CSS: Полное руководство
2. Как центрировать элемент по вертикали в CSS
3. Как центрировать элемент горизонтально и вертикально в CSS
4. Flexbox Froggy – игра для обучения CSS Flexbox
5. Можно ли использовать... Поддержка HTML5, CSS3 и т.д. в разных браузерах
6. Grid Garden – игра для ознакомления с CSS сетками
7. Выравнивание блоков в сетке – CSS: Каскадные таблицы стилей