Как центрировать по горизонтали CSS

Чтобы центрировать блок по горизонтали в CSS, можно использовать несколько способов. Рассмотрим наиболее распространенные из них:

1. С помощью margin: 0 auto — можно задать нулевые отступы сверху и снизу и автоматически вычислить отступы слева и справа, чтобы блок был по центру:

.block {
  width: 50%; /* ширина блока */
  margin: 0 auto; /* центрирование по горизонтали */
}

В этом примере блок будет иметь ширину 50% от родительского элемента и автоматически центрироваться по горизонтали.

2. С помощью text-align: center — можно задать свойство text-align родительскому элементу и выровнять содержимое блока по центру:

.parent {
  text-align: center; /* выравнивание содержимого по центру */
}

.block {
  display: inline-block; /* установка блока в строчно-блочный режим */
}

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

3. С помощью flexbox — можно использовать flex-контейнер и свойство justify-content: center, чтобы выравнивать блоки по центру:

.parent {
  display: flex; /* установка flex-контейнера */
  justify-content: center; /* выравнивание элементов по центру */
}

.block {
  width: 50%; /* ширина блока */
}

В этом примере элементы полностью определяются свойствами flexbox. С помощью display: flex устанавливается flex-контейнер и с помощью justify-content содержимое выравнивается по центру.