Адам Аргайл рассказал про плюсы и минусы разных вариантов центрирования контента в CSS — "Centering in CSS".

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

Самый лучший вариант — центрирование с помощью флексов:

.gentle-flex {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1ch;
}

#css

https://web.dev/centering-in-css/