Центрирование div внутри div вертикально: без margin-top

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

Flexbox — это ваш быстрый решатель этого вопроса.

Сочетайте display: flex;, justify-content: center; и align-items: center; в родительском div. Эти CSS свойства превратят ваш div в flex-контейнер, и дочерний div моментально центрируется.

Вот отличный образец кода:

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100px; /* Вы можете установить любую высоту */
}

.centered {
  margin: auto; /* Это свойство обеспечивает горизонтальное центрирование, но оно также отлично работает и для вертикального */
}

<div class="container">
  <div class="centered">Я – вертикально отцентрирован</div>
</div>

Таким образом, ваш div с классом .centered будет идеально центрирован как по вертикали, так и по горизонтали, без учёта его размеров.

Подробности (Для гиков и афиционадо)

Да, Flexbox моден и универсален, однако стоит знать и другие методы, их преимущества и недостатки.

Способ №1: Абсолютное позиционирование и трансформации

Если Flexbox вам не подходит, можно использовать CSS трансформации и абсолютное позиционирование.

.parent {
  position: relative;
  height: 100px; /* Высота может быть любой, для примера здесь указано 100 пикселей */
}

.child {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); /* Смещаем элемент назад на половины его размеров */
}

С этим подходом вы будете на шаг впереди даже от устаревших браузеров.

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

Способ №2: Возвращение к таблицам

Хотите почувствовать ностальгию? CSS предлагает вам стилизацию под таблицы:

.parent {
  display: table;
  height: 200px; 
}

.child {
  display: table-cell;
  vertical-align: middle;
}

Обратите внимание, display: table-cell; иногда может замедлять отображение контента из-за особенностей рендеринга.

Важность поддержки браузеров

Некоторые браузеры не всегда поддерживают актуальные свойства. Приходится использовать вендорные префиксы -webkit- и -ms-.

Адаптация к изменчивому содержимому

Если содержимое div непостоянно, вам сюда:

• Flexbox прекрасно подстроится под любые изменения размеров, словно разгадывая ребусы.
• Абсолютное позиционирование с margin: auto и top: 0; left: 0; bottom: 0; right: 0; тоже неплохой вариант.

Искусство избегания

Избегайте использования фиксированных значений margin-top, как и спойлеров перед просмотром фильма. Корректировка таких значений при динамичных размерах div требует много времени.

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

Проиллюстрируем это на подобии художественной галереи:

.GalleryWall { display: flex; justify-content: center; align-items: center; height: 100vh; }
.ArtPiece { margin: auto; }

Ваш контент с классом .ArtPiece будет величественно позиционироваться в центре вашей .GalleryWall.

Раскрываем карты (Ресурсы и примеры для изучения)

Для того чтобы стать мастером CSS из обычного новичка, требуется практика:

• Покарабкайтесь в CodePen и JSFiddle для онлайн-экспериментов и оттачивания навыка центрирования.
• Взгляните на CSS-Tricks Guide: это целая энциклопедия на тему центрирования.
• И помните: играя в Flexbox Froggy, вы углубите свои навыки работы с Flexbox.