doctor Brain

мир глазами веб-разработчика

CSS: центрирование для Flexbox

центрируем элемент в контейнере Flexbox

2024-10-24 dr.Brain

время чтения 1 мин.

Photo by Charles-Adrien Fournier on Unsplash

Flexbox модель стала революционным решением в мире CSS. Вспомним про быстрый и простой способ центрирования контента по вертикали и горизонтали с помощью Flexbox,

.flex-center {
  display: flex;
  justify-content: center;
  align-items: center;
}

Если применить класс flex-center к контейнеру, все дочерние элементы отцентруются. Это просто, мощно и применимо во всех современных браузерах. Как не полюбить такое решение?

Спасибо за внимание.