align-content: Простой способ выравнивания по центру с CSS

Блочные макеты были частью CSS с самого начала, но им всегда не хватало необходимых элементов управления выравниванием. Теперь, благодаря поддержке align-content в блочных макетах, можно центрировать по вертикали с той же гибкостью, что и в flex и grid.

Старые подходы требовали обходного пути в виде flexbox или grid. При использовании flex требовалось несколько свойств, чтобы добиться вертикального центрирования. Grid немного упрощал задачу с помощью align-content, но всё равно требовал изменения режима разметки.

Благодаря новой поддержке align-content в блочных макетах можно добиться того же результата, сохранив семантику блочного макета. Не нужно переключать режимы разметки — просто добавьте align-content в контейнер блока.

-/* Старый подход с flex */
-.container {
-  min-height: 100vh;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-}
-/* Старый подход с grid */
-.container {
-  min-height: 100vh;
-  display: grid;
-  align-content: center;
-}
+/* Новый подход с align-content */
+.container {
+  min-block-size: 100vh;
+  display: block;
+  align-content: center;
+}

Браузер автоматически распределит доступное пространство, расположив содержимое в центре контейнера. Это работает с любым блочным контейнером, имеющим установленный размер блока.

See the Pen

Поддержка браузерами и резервные варианты

Эта функция требует наличия браузеров, поддерживающих последнюю спецификацию CSS Box Alignment. Для старых браузеров в качестве резервного варианта можно использовать flex или grid.

@supports (display: block) and (align-content: center) {
  .container {
    display: block;
    align-content: center;
  }
}

/* Резервный вариант для старых браузеров */
.container {
  min-height: 100vh;
  display: grid;
  align-content: center;
}

Самый безопасный подход — использовать @supports, предоставляя резервный вариант для браузеров, не поддерживающих align-content в блочных макетах. Таким образом, можно обеспечить согласованную работу во всех браузерах.

Комментарии