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

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

Представим, что у нас есть контейнер, внутри которого мы хотим центрировать содержимое:

<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
</div>

Нам нужно, чтобы все элементы item были расположены вертикально и центрированы по горизонтали. Для этого мы можем использовать следующие CSS-правила:

.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh; /* высота контейнера равна высоте видимой области браузера */
}

.item {
  margin: 10px; /* добавляем отступы для элементов */
}

В данном случае, свойство display: flex делает контейнер гибким блоком, что позволяет применять к нему свойства Flexbox. flex-direction: column означает, что элементы внутри контейнера будут располагаться вертикально. align-items: center центрирует содержимое по горизонтали, а justify-content: center — по вертикали.

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