Центрирование блока на странице — почти мем среди тех, кто когда-либо занимался вёрсткой, настолько часто эта, казалось бы, простая задача вызывала затруднения в старом CSS. Сегодня способов решить её стало заметно больше, и почти все они действительно надёжны.
Горизонтальное центрирование блока с известной шириной классически делают через margin слева и справа со значением auto — браузер сам поделит оставшееся пространство поровну между двумя сторонами. Этот способ работает давно и не требует ничего, кроме заданной ширины у самого блока.
Текст внутри блока центрируется куда проще — свойство text-align со значением center решает эту задачу для строчного содержимого, но оно не подходит для центрирования самого блочного элемента целиком, и путаница между этими двумя разными задачами встречается очень часто.
Flexbox превратил центрирование в одну из самых простых задач вёрстки: display flex на родителе вместе с justify-content и align-items со значением center центрирует дочерний элемент и по горизонтали, и по вертикали одновременно, всего в три строчки кода.
Grid предлагает похожее по простоте решение — place-items со значением center на контейнере центрирует содержимое сразу по обеим осям, что особенно удобно для полноэкранных заглушек или модальных окон, где нужно центрировать один-единственный блок.
Абсолютное позиционирование с отрицательными отступами или трансформацией translate — более старый способ, который до сих пор встречается в существующих проектах, но для новой вёрстки Flexbox и Grid обычно дают более понятный и короткий код.
Подборка рабочих способов центрирования с наглядными примерами для каждого случая собрана в статье про выравнивание элементов на MDN.
