Существует множество способов центрирования элементов. Основные различия заключаются в том, что именно мы центрируем (строчный, блочный элемент, текст), относительно чего центрируем (родителя, viewport) и какие технологии используем (CSS, JavaScript).

Центрирование строчного содержимого (текст, span, a, img и т.д.) по горизонтали:

text-align: center; применяется к родительскому элементу.

.parent {
  text-align: center; /* Центрирует строчные и инлайн-блочные потомки */
}

Центрирование блочного элемента по горизонтали:

С помощью margin: auto; и заданной ширины.

.element {
  width: 50%; /* Задаем ширину */
  margin: 0 auto; /* Автоматические горизонтальные отступы центрируют элемент */
}

Центрирование блочного элемента по вертикали и горизонтали (двумерное центрирование):

Flexbox: Гибкий и мощный способ.

.parent {
  display: flex;
  justify-content: center; /* Центрирование по горизонтали */
  align-items: center; /* Центрирование по вертикали */
  height: 100vh; /* Пример: центрирование относительно высоты viewport */
}

Grid: Подходит для более сложных макетов.

.parent {
  display: grid;
  place-items: center; /* Сокращение для align-items: center; justify-items: center; */
  height: 100vh;
}

Positioning and Transform: Подходит для центрирования элемента относительно его родителя, даже если родитель имеет ограниченные размеры.

.parent {
  position: relative; /* Родитель должен быть позиционирован */
}

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

Margin Auto с абсолютным позиционированием: Требует задания размеров элемента.

.parent {
  position: relative;
}

.element {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto; /* Автоматические отступы центрируют */
  width: 200px; /* Требуются размеры */
  height: 100px;
}

Таблица сравнения некоторых методов для двумерного центрирования блочных элементов:

Метод	Описание	Преимущества	Недостатки
Flexbox	Использование свойств display: flex, justify-content, align-items	Гибкий, адаптивный, хорошо подходит для однонаправленных элементов	Может быть избыточен для очень простых случаев
Grid	Использование свойств display: grid, place-items	Мощный, подходит для сложных многомерных макетов	Больше синтаксиса, чем у Flexbox, для простого центрирования
Positioning + Transform	Сочетание абсолютного позиционирования и transform	Работает даже с неизвестными размерами элемента	Требует позиционированного родителя
Margin Auto + Absolute Pos.	Использование position: absolute и margin: auto с заданными размерами	Простота для элементов с жестко заданными размерами	Требует задания размеров элемента, менее гибкий

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

В чем различия между различными способами центрирования элементов на веб-странице?