Как расположить контейнер по центру CSS

Существует несколько способов расположения контейнера по центру с помощью CSS. Рассмотрим наиболее распространенные из них.

1. Расположение посредством свойств margin: auto; и text-align: center;.

.container {
  margin: auto;
  width: 80%; /* ширина контейнера */
  text-align: center;
}

Установка свойства margin с автоматическими значениями по горизонтали помещает контейнер по центру родительского элемента, а свойство text-align: center; центрирует содержимое контейнера по горизонтали.

2. Расположение посредством свойства display: flex; и его свойств justify-content: center; и align-items: center;

.parent {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
}

.container {
  width: 80%; /* ширина контейнера */
}

Установка свойства display: flex; на родительском элементе, с последующей установкой justify-content: center; align-items: center; помещает контейнер по центру родительского элемента как по горизонтали, так и по вертикали.

3. Расположение посредством свойства position: absolute; и полей top, left, bottom, right.

.parent {
  position: relative; /* установка позиции для контейнера-родителя */
  height: 100%; /* установка высоты родительского элемента */
}

.container {
  width: 80%; /* задание ширины контейнера */
  position: absolute;
  top: 50%; /* установка вертикального смещения в пикселях */
  left: 50%; /* установка горизонтального смещения в пикселях */
  transform: translate(-50%, -50%); /* сброс позиции по горизонтали и вертикали контейнера */
}

Установка свойства position: absolute; на контейнере помещает его относительно родительского элемента. Затем мы устанавливаем поле top в 50%, чтобы сместить контейнер вертикально на половину высоты родительского элемента. Для горизонтального центрирования мы устанавливаем поле left в 50%, чтобы сместить контейнер горизонтально на половину ширины родительского элемента. Наконец, с помощью свойства transform: translate(-50%, -50%); мы «сбрасываем» позицию контейнера на половину его ширины и высоты, чтобы контейнер оказался точно по центру родительского элемента.

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