Как выравнять 2 блока по центру?

Есть несколько способов выравнивания двух блоков по центру с использованием CSS, но я расскажу о двух наиболее распространенных методах.

1. Использование flexbox:

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

HTML:

<div class="container">
  <div class="block1">Блок 1</div>
  <div class="block2">Блок 2</div>
</div>

CSS:

.container {
  display: flex;
  justify-content: center; /* Выравнивание блоков по горизонтали */
  align-items: center; /* Выравнивание блоков по вертикали */
}

.block1, .block2 {
  /* Стили блоков */
}

2. Использование CSS Grid:

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

HTML:

<div class="container">
  <div class="block1">Блок 1</div>
  <div class="block2">Блок 2</div>
</div>

CSS:

.container {
  display: grid;
  place-items: center; /* Выравнивание блоков по центру */
}

.block1, .block2 {
  /* Стили блоков */
}

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