CSS Flexbox: идеальный инструмент для центрирования в Bootstrap 4

Приветствую! Сегодня мы погрузимся в мир Flexbox и разберемся, почему он стал настоящим спасением для центрирования элементов в Bootstrap 4. В предыдущих версиях Bootstrap для выравнивания элементов использовались float-стили, но с приходом Bootstrap 4 все изменилось. Flexbox стал фундаментом для системы сетки, предоставляя невероятную гибкость и новые возможности для создания современных и адаптивных веб-страниц.

С точки зрения статистики, популярность Flexbox не удивительна: по данным Stack Overflow Developer Survey 2023 года, 75% разработчиков используют Flexbox в своей работе. Это говорит о том, что Flexbox уже прочно закрепился в мире веб-разработки и стал неотъемлемой частью фреймворков, таких как Bootstrap.

Что же делает Flexbox таким удобным для центрирования элементов? В отличие от float-стилей, Flexbox предоставляет простой и интуитивно понятный механизм для управления расположением и выравниванием элементов в контейнере. Вы можете с легкостью центрировать элементы как по горизонтали, так и по вертикали, а также изменять их размер и порядок без сложных расчетов и дополнительных стилей.

В этой статье мы подробно рассмотрим все преимущества Flexbox для центрирования элементов, изучим основные свойства, необходимые для достижения желаемого результата, а также посмотрим на практические примеры и советы по использованию Flexbox в Bootstrap 4.

Преимущества Flexbox для центрирования элементов

Давайте подробно рассмотрим, почему Flexbox является идеальным инструментом для центрирования элементов в Bootstrap 4, и какие преимущества он предоставляет по сравнению с традиционными методами выравнивания.

Простота и интуитивность

Flexbox значительно упрощает процесс центрирования элементов. В отличие от float-стилей, которым требовалось использование дополнительных элементов и сложных расчетов, Flexbox позволяет выполнить центрирование с помощью нескольких простых свойств. Например, для горизонтального центрирования элемента достаточно установить свойство `justify-content: center`, а для вертикального центрирования — `align-items: center`. Это делает код более читаемым и упрощает дальнейшую отладку.

Гибкость и адаптивность

Flexbox прекрасно справляется с задачей создания адаптивных макетов. С помощью Flexbox вы можете управлять размером, порядком и выравниванием элементов в зависимости от размера экрана устройства. Это особенно важно для мобильных версий сайтов, где контент должен правильно отображаться на маленьких экранах.

Управление пространством

Flexbox позволяет эффективно управлять пространством между элементами. С помощью свойств `justify-content` и `align-items` вы можете распределять свободное пространство между элементами, а также устанавливать зазоры между ними. Это даёт вам больший контроль над визуальной композицией страницы.

Поддержка браузерами

Flexbox имеет широкую поддержку современных браузеров. Согласно статистике Can I Use, Flexbox поддерживается более чем 95% пользователей веб-браузеров в мире. Это делает его надёжным и универсальным инструментом для разработки веб-сайтов.

В итоге, Flexbox — это мощный и гибкий инструмент для центрирования элементов в Bootstrap 4, который предоставляет множество преимуществ перед традиционными методами. Он прост в использовании, адаптируется к разным размерам экранов, позволяет эффективно управлять пространством и имеет широкую поддержку браузеров.

В следующей части мы подробно рассмотрим основные свойства Flexbox, необходимые для центрирования элементов.

Основные свойства Flexbox для центрирования

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

`display: flex`

Это свойство превращает родительский элемент в контейнер Flexbox, что делает его «гибким» и позволяет управлять расположением и выравниванием дочерних элементов.

Пример:

css
.container {
display: flex;
}

`justify-content`

Это свойство управляет выравниванием элементов по главной оси Flexbox. По умолчанию ось направлена горизонтально.

Основные значения:

• `flex-start`: выравнивает элементы в начале оси.
• `flex-end`: выравнивает элементы в конце оси.
• `center`: центрирует элементы по оси.
• `space-between`: распределяет элементы равномерно по оси, с пространством между ними.
• `space-around`: распределяет элементы равномерно по оси, с пространством с двух сторон каждого элемента.

Пример:

css
.container {
justify-content: center; /* Центрирует элементы по горизонтали */
}

`align-items`

Это свойство управляет выравниванием элементов по перекрестной оси Flexbox. По умолчанию перекрестная ось направлена вертикально.

Основные значения:

• `flex-start`: выравнивает элементы в начале оси.
• `flex-end`: выравнивает элементы в конце оси.
• `center`: центрирует элементы по оси.
• `stretch`: растягивает элементы по оси.
• `baseline`: выравнивает элементы по базовой линии.

Пример:

css
.container {
align-items: center; /* Центрирует элементы по вертикали */
}

Используя эти свойства, вы можете создавать различные композиции элементов в контейнере Flexbox. В следующих разделах мы рассмотрим практические примеры центрирования элементов с помощью Flexbox в Bootstrap 4.

Горизонтальное центрирование элементов с помощью Flexbox

Горизонтальное центрирование элементов — одна из самых распространенных задач при разработке веб-страниц. Flexbox предоставляет простой и эффективный способ для ее решения.

Для горизонтального центрирования элемента с помощью Flexbox нужно установить свойство `justify-content: center` для родительского элемента. Это выравнивает все дочерние элементы по центру по горизонтали.

Пример:

css
.container {
display: flex;
justify-content: center;
}

В этом примере родительский элемент `.container` превращен в контейнер Flexbox с помощью свойства `display: flex`. Затем свойство `justify-content: center` центрирует все дочерние элементы `.item` по горизонтали внутри контейнера.

Обратите внимание, что для горизонтального центрирования необходимо, чтобы родительский элемент имел определенную ширину. Если ширина родительского элемента не определена, то элементы будут центрироваться относительно ширины родительского элемента, которая может быть равна ширине содержимого или 100% ширины родительского элемента.

Flexbox также позволяет центрировать элемент в контексте других элементов. Для этого можно использовать свойства `justify-content` и `align-items`.

Пример:

css
.container {
display: flex;
justify-content: space-between; /* Распределяет элементы равномерно с пространством между ними */
}

В этом примере мы используем `justify-content: space-between` для того, чтобы распределить элементы `.item` равномерно внутри контейнера `.container`, с пространством между ними.

Горизонтальное центрирование элементов с помощью Flexbox — простой и эффективный способ создания чистых и адаптивных макетов. В следующей части мы рассмотрим вертикальное центрирование элементов с помощью Flexbox.

Вертикальное центрирование элементов с помощью Flexbox

Вертикальное центрирование элементов в Bootstrap 4 с помощью Flexbox – это не менее важное умение, чем горизонтальное. Оно позволяет вам создавать более гармоничные и привлекательные макеты, где элементы идеально выравниваются не только по ширине, но и по высоте.

Для вертикального центрирования с помощью Flexbox мы используем свойство `align-items: center`. Вспомним, что `align-items` управляет выравниванием элементов по перекрестной оси, которая по умолчанию направлена вертикально.

Пример:

css
.container {
display: flex;
align-items: center;
height: 200px; /* Обязательно задайте высоту для контейнера */
}

В этом примере мы сначала объявляем `.container` как `display: flex`. Затем свойство `align-items: center` центрирует элемент `.item` по вертикали внутри контейнера. Обратите внимание, что для правильной работы вертикального центрирования необходимо установить высоту контейнера.

Важно: если вы не установите высоту контейнера, то элемент будет выровнен по верхней границе контейнера. Это происходит потому, что Flexbox по умолчанию растягивает дочерние элементы по высоте контейнера.

Теперь давайте рассмотрим несколько важных моментов:

• Центрирование по высоте родительского элемента: если вы хотите центрировать элемент по высоте родительского элемента, не имея строго определенной высоты контейнера, можно использовать такой подход:

  css
  .container {
  display: flex;
  justify-content: center; /* Центрирование по горизонтали (дополнительно) /
  align-items: center;
  min-height: 100vh; / Задание минимальной высоты в 100% от высоты окна */
  }

  В этом примере мы задаем `min-height: 100vh`, что позволяет контейнеру занимать минимальную высоту в 100% от высоты окна браузера.

• Центрирование в блоке с фиксированной высотой: в случае, если вы имеете элемент с фиксированной высотой, например, `height: 300px`, вы можете центрировать его по вертикали с помощью `align-items: center`, не задавая высоту контейнера. В этом случае элемент будет центрирован относительно своей собственной высоты.

Вертикальное центрирование элементов с помощью Flexbox в Bootstrap 4 — мощный инструмент для создания чистых и адаптивных макетов. В следующей части мы рассмотрим центрирование текста с помощью Flexbox.

Центрирование текста с помощью Flexbox

Центрирование текста — еще одна задача, с которой Flexbox справляется блестяще. Используя Flexbox, вы можете центрировать текст как по горизонтали, так и по вертикали.

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

• Установить `display: flex` для родительского элемента. Это превратит родительский элемент в контейнер Flexbox, что позволит управлять расположением текста.
• Установить `justify-content: center` для родительского элемента. Это выровняет текст по центру по горизонтали.

Пример:

css
.container {
display: flex;
justify-content: center;
}

В этом примере мы центрируем текст в параграфе `p` внутри контейнера `.container`.

Для центрирования текста по вертикали с помощью Flexbox нужно сделать следующее:

• Установить `display: flex` и `align-items: center` для родительского элемента. Это превратит родительский элемент в контейнер Flexbox и выровняет текст по центру по вертикали.
• Установить `height: 100%` для родительского элемента. Это заставит родительский элемент занимать 100% высоты своего родителя, что позволит правильно центрировать текст по вертикали.

Пример:

css
.container {
display: flex;
align-items: center;
height: 100%;
}

В этом примере мы центрируем текст в параграфе `p` внутри контейнера `.container` по вертикали.

Важно отметить, что центрирование текста с помощью Flexbox может быть не идеальным решением во всех случаях. Например, если текст содержит много строк, то он может не центрироваться правильно. В таких случаях можно использовать другие методы центрирования текста, например, с помощью `text-align: center`.

В следующем разделе мы рассмотрим применение Flexbox для центрирования элементов в Bootstrap 4.

Применение Flexbox для центрирования в Bootstrap 4

Bootstrap 4 — это мощный фреймворк для фронтенд-разработки, который широко используется для создания современных и адаптивных веб-сайтов. Bootstrap 4 использует Flexbox в качестве основы для своей системы сетки, что делает его еще более гибким и удобным в использовании.

В Bootstrap 4 вы можете использовать Flexbox для центрирования элементов с помощью специальных классов утилит. Эти классы предоставляют простой и быстрый способ для достижения желаемого результата.

`d-flex`

Этот класс превращает элемент в контейнер Flexbox, что позволяет управлять расположением и выравниванием дочерних элементов.

`justify-content-center`

Этот класс центрирует элементы по горизонтали в контейнере Flexbox.

`align-items-center`

Этот класс центрирует элементы по вертикали в контейнере Flexbox.

Пример:

В этом примере мы используем классы `d-flex`, `justify-content-center` и `align-items-center` для того, чтобы центрировать элемент `.item` по горизонтали и вертикали внутри контейнера `.container`.

Bootstrap 4 также предоставляет классы для центрирования элементов в контексте других элементов. Например, класс `mx-auto` центрирует элемент по горизонтали относительно родительского элемента, а класс `my-auto` центрирует элемент по вертикали относительно родительского элемента.

Пример:

В этом примере мы используем класс `mx-auto` для того, чтобы центрировать элемент `.item` по горизонтали внутри контейнера `.container`.

Flexbox в Bootstrap 4 — это мощный инструмент для создания чистых и адаптивных макетов. Он позволяет вам легко центрировать элементы по горизонтали и вертикали, а также управлять их размером и расположением.

В следующем разделе мы рассмотрим несколько практических примеров использования Flexbox для центрирования в Bootstrap 4.

Примеры использования Flexbox для центрирования в Bootstrap 4

Давайте рассмотрим несколько практических примеров использования Flexbox для центрирования элементов в Bootstrap 4.

Пример 1: Центрирование заголовка в контейнере

Представьте, что у нас есть заголовок `h1`, который нужно центрировать по горизонтали и вертикали внутри контейнера.

css
.container {
display: flex;
justify-content: center;
align-items: center;
height: 300px; /* Задаем высоту контейнера для вертикального центрирования */
}

В этом примере мы используем классы `d-flex`, `justify-content-center` и `align-items-center` для центрирования заголовка по горизонтали и вертикали внутри контейнера. Также мы задаем высоту контейнера с помощью свойства `height: 300px`, чтобы обеспечить правильное вертикальное центрирование.

Пример 2: Центрирование карточки в строке

Представьте, что у нас есть несколько карточек `card`, которые нужно центрировать по горизонтали в строке.

В этом примере мы используем классы `row` и `col-md-4` для создания строки с тремя колонками. Затем мы используем класс `mx-auto` для того, чтобы центрировать каждую карточку `card` по горизонтали в своей колонке.

Пример 3: Центрирование формы

Представьте, что у нас есть форма, которую нужно центрировать по горизонтали и вертикали на странице.

В этом примере мы используем классы `d-flex`, `justify-content-center` и `align-items-center` для центрирования формы по горизонтали и вертикали на странице. Также мы устанавливаем высоту контейнера в 100% от высоты окна браузера с помощью свойства `height: 100vh`.

Эти примеры демонстрируют простоту и эффективность использования Flexbox для центрирования элементов в Bootstrap 4. Вы можете использовать эти приемы для создания различных макетов и композиций элементов на своих веб-страницах.

В следующем разделе мы рассмотрим дополнительные советы по центрированию элементов с помощью Flexbox.

Дополнительные советы по центрированию элементов с помощью Flexbox

Мы уже рассмотрели основные принципы центрирования элементов с помощью Flexbox в Bootstrap 4. Теперь давайте поговорим о некоторых дополнительных советах, которые помогут вам создавать более утонченные и гибкие макеты.

1. Использование `align-self` для индивидуального центрирования

Свойство `align-self` позволяет вам центрировать отдельные элементы в контейнере Flexbox, не затрагивая выравнивание остальных элементов.

Пример:

В этом примере мы используем класс `align-self-center` для того, чтобы центрировать элемент «Элемент 2» по вертикали внутри контейнера. Остальные элементы остаются выровненными по умолчанию.

2. Управление отступами с помощью `margin`

Свойство `margin` позволяет вам управлять отступами между элементами в контейнере Flexbox.

Пример:

В этом примере мы используем класс `mx-3` для того, чтобы установить горизонтальный отступ в 3 рема (rem) для каждого элемента.

3. Использование `flex-direction` для изменения направления оси

Свойство `flex-direction` позволяет вам изменять направление главной оси Flexbox. По умолчанию ось направлена горизонтально.

Пример:

В этом примере мы используем класс `flex-column` для того, чтобы изменить направление главной оси на вертикальное. Элементы будут расположены в столбец.

4. Использование `flex-wrap` для переноса элементов

Свойство `flex-wrap` позволяет вам управлять переносом элементов в контейнере Flexbox.

Пример:

В этом примере мы используем класс `flex-wrap` для того, чтобы позволить элементам переноситься на новую строку, если они не помещаются в одну строку.

Эти дополнительные советы помогут вам более гибко и эффективно использовать Flexbox для центрирования элементов в Bootstrap 4.

В следующем разделе мы подведем итоги и рассмотрим заключение по теме «CSS Flexbox: идеальный инструмент для центрирования в Bootstrap 4».

Итак, мы прошли путь от основ Flexbox до практических примеров и дополнительных советов по его использованию в Bootstrap 4. Как вы увидели, Flexbox — это невероятно мощный и гибкий инструмент, который позволяет вам легко и эффективно центрировать элементы на ваших веб-страницах.

Ключевые преимущества Flexbox в Bootstrap 4:

• Простота и интуитивность: Flexbox предлагает простые классы утилит, которые делают центрирование элементов быстрым и легким.
• Адаптивность: Flexbox автоматически приспосабливает расположение элементов к разным размерам экрана, что делает ваши макеты адаптивными и responsive.
• Гибкость: Flexbox позволяет вам управлять размером, порядком и выравниванием элементов в контейнере с помощью простых свойств и классов.
• Широкая поддержка: Flexbox имеет широкую поддержку современных браузеров, что делает его надёжным и универсальным инструментом для веб-разработки.

Изучив Flexbox, вы можете создавать более эффективные и эстетичные макеты для ваших веб-страниц.

Помните, что Flexbox — это не единственный инструмент для центрирования элементов. В некоторых случаях могут быть более подходящие методы, например, использование `text-align: center` или `margin: auto`. Однако Flexbox представляет собой мощный и гибкий инструмент, который особенно полезен в Bootstrap 4 благодаря его интеграции в систему сетки.

Не бойтесь экспериментировать с Flexbox и искать новые способы его использования для создания уникальных и эффективных веб-дизайнов.

В этом разделе мы рассмотрим таблицу, которая подробно описывает основные свойства Flexbox, их значения и эффект, который они производят на расположение и выравнивание элементов в контейнере.

Эта таблица предназначена для того, чтобы вы могли быстро и удобно найти нужное свойство и понять, как оно влияет на элементы.

Свойство	Значение	Описание
`display: flex`	`flex`	Превращает родительский элемент в контейнер Flexbox.
`flex-direction`	`row`	Выстраивает элементы в строку (по горизонтали).
`flex-direction`	`column`	Выстраивает элементы в столбец (по вертикали).
`justify-content`	`flex-start`	Выравнивает элементы в начале главной оси.
`justify-content`	`flex-end`	Выравнивает элементы в конце главной оси.
`justify-content`	`center`	Центрирует элементы по главной оси.
`justify-content`	`space-between`	Распределяет элементы равномерно по главной оси, с пространством между ними.
`justify-content`	`space-around`	Распределяет элементы равномерно по главной оси, с пространством с двух сторон каждого элемента.
`align-items`	`flex-start`	Выравнивает элементы в начале перекрестной оси.
`align-items`	`flex-end`	Выравнивает элементы в конце перекрестной оси.
`align-items`	`center`	Центрирует элементы по перекрестной оси.
`align-items`	`stretch`	Растягивает элементы по перекрестной оси.
`align-items`	`baseline`	Выравнивает элементы по базовой линии.
`align-self`	`auto`	Использует значение `align-items` родительского элемента.
`align-self`	`flex-start`	Выравнивает элемент в начале перекрестной оси.
`align-self`	`flex-end`	Выравнивает элемент в конце перекрестной оси.
`align-self`	`center`	Центрирует элемент по перекрестной оси.
`align-self`	`stretch`	Растягивает элемент по перекрестной оси.
`align-self`	`baseline`	Выравнивает элемент по базовой линии.
`flex-wrap`	`nowrap`	Элементы не переносятся на новую строку.
`flex-wrap`	`wrap`	Элементы переносятся на новую строку, если не помещаются в одну строку.
`flex-wrap`	`wrap-reverse`	Элементы переносятся на новую строку, если не помещаются в одну строку, но в обратном порядке.
`flex-grow`	`0`	Элемент не растягивается.
`flex-grow`	`1`	Элемент растягивается, чтобы занять все доступное пространство.
`flex-grow`	`2`	Элемент растягивается в два раза больше, чем другие элементы с `flex-grow: 1`.
`flex-shrink`	`1`	Элемент сжимается, если не хватает пространства.
`flex-shrink`	`0`	Элемент не сжимается.
`flex-basis`	`auto`	Ширина элемента определяется его содержимым.
`flex-basis`	`100px`	Ширина элемента устанавливается в 100 пикселей.
`order`	`0`	Элемент располагается в начале порядка.
`order`	`1`	Элемент располагается вторым в порядке.
`order`	`-1`	Элемент располагается перед элементами с `order: 0`.

Помните, что Flexbox — это мощный инструмент, который позволяет вам создавать различные композиции элементов. Экспериментируйте с разными свойствами и их значениями, чтобы достичь желаемого результата.

Чтобы еще лучше понять преимущества Flexbox перед традиционными методами центрирования элементов в Bootstrap, рассмотрим сравнительную таблицу.

В этой таблице мы сравним Flexbox с методами центрирования, которые использовались в Bootstrap 3 и раньше.

Метод	Описание	Преимущества	Недостатки
`float: left; margin: 0 auto;`	Традиционный метод центрирования элемента с помощью `float` и `margin`.	Простой и понятный для новичков.	Сложный в использовании для сложных композиций. Не адаптивен к разным размерам экрана. Требует дополнительных стилей для вертикального центрирования.
`text-align: center;`	Центрирование текста с помощью свойства `text-align`.	Простой и эффективный метод для центрирования текста.	Не позволяет центрировать нетекстовые элементы. Не адаптивен к разным размерам экрана.
`margin: 0 auto;`	Центрирование элемента с помощью свойства `margin`.	Простой и эффективный метод для центрирования элемента по горизонтали.	Не позволяет центрировать элемент по вертикали. Не адаптивен к разным размерам экрана.
`display: table-cell; vertical-align: middle;`	Центрирование элемента с помощью табличной модели.	Позволяет центрировать элемент по вертикали.	Не адаптивен к разным размерам экрана. Не гибкий для создания сложных композиций.
`Flexbox`	Современный метод центрирования элементов с помощью Flexbox.	Простой и интуитивный в использовании. Адаптивен к разным размерам экрана. Позволяет создавать гибкие и сложные композиции элементов.	Может быть более сложным для новичков, потребует изучения дополнительных свойств.

Как видите, Flexbox предлагает множество преимуществ по сравнению с традиционными методами. Он проще в использовании, более гибкий и адаптивен к разным размерам экрана.

Flexbox — это идеальный инструмент для центрирования элементов в Bootstrap 4 и для создания современных и адаптивных веб-сайтов.

FAQ

Давайте рассмотрим некоторые часто задаваемые вопросы о Flexbox в Bootstrap 4.

1. Как центрировать элемент по вертикали в Bootstrap 4 с помощью Flexbox?

Для вертикального центрирования элемента в Bootstrap 4 с помощью Flexbox нужно сделать следующее:

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

Пример:

В этом примере мы используем классы `d-flex` и `align-items-center` для того, чтобы центрировать элемент `.item` по вертикали внутри контейнера `.container`. Также мы устанавливаем высоту контейнера в 200 пикселей с помощью свойства `height: 200px`.

2. Как центрировать элемент по горизонтали и вертикали в Bootstrap 4 с помощью Flexbox?

Чтобы центрировать элемент по горизонтали и вертикали в Bootstrap 4 с помощью Flexbox, нужно сделать следующее:

• Установить `display: flex` для родительского элемента.
• Установить `justify-content: center` для родительского элемента. Это выровняет элементы по центру по горизонтали.
• Установить `align-items: center` для родительского элемента. Это выровняет элементы по центру по вертикали.
• Установить высоту для родительского элемента.

Пример:

В этом примере мы используем классы `d-flex`, `justify-content-center` и `align-items-center` для того, чтобы центрировать элемент `.item` по горизонтали и вертикали внутри контейнера `.container`. Также мы устанавливаем высоту контейнера в 200 пикселей с помощью свойства `height: 200px`.

3. Как центрировать элемент по горизонтали в Bootstrap 4 с помощью Flexbox?

Для горизонтального центрирования элемента в Bootstrap 4 с помощью Flexbox нужно сделать следующее:

• Установить `display: flex` для родительского элемента.
• Установить `justify-content: center` для родительского элемента.

Пример:

В этом примере мы используем классы `d-flex` и `justify-content-center` для того, чтобы центрировать элемент `.item` по горизонтали внутри контейнера `.container`.

4. Как центрировать текст в Bootstrap 4 с помощью Flexbox?

Для центрирования текста в Bootstrap 4 с помощью Flexbox нужно сделать следующее:

• Установить `display: flex` для родительского элемента.
• Установить `justify-content: center` для родительского элемента.
• Установить `align-items: center` для родительского элемента.

Пример:

В этом примере мы используем классы `d-flex`, `justify-content-center` и `align-items-center` для того, чтобы центрировать текст внутри параграфа `p` по горизонтали и вертикали.

5. Как центрировать элемент по вертикали в строке Bootstrap 4 с помощью Flexbox?

Для вертикального центрирования элемента в строке Bootstrap 4 с помощью Flexbox нужно сделать следующее:

• Установить `display: flex` и `align-items: center` для родительского элемента строки (например, `row`).

Пример:

В этом примере мы используем классы `row` и `d-flex` для того, чтобы превратить строку в контейнер Flexbox. Затем мы используем класс `align-items-center` для того, чтобы центрировать элементы в строке по вертикали.

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