Как сделать по центру css?

• Для одной строки текста внутри блока: text-align: center по горизонтали.
• Для блочного элемента с фиксированной шириной: margin: 0 auto, работает только если ширина задана явно, у элемента на всю ширину родителя auto ничего не даст.
• Универсальный способ через flex: у родителя display: flex, justify-content: center по горизонтали и align-items: center по вертикали, подходит почти для любого случая, включая центрирование картинки в блоке.
• Через grid ещё короче: display: grid и place-items: center на родителе центрирует ребёнка сразу по обеим осям одним свойством.
• Абсолютное позиционирование: position: absolute, top: 50%, left: 50%, и transform: translate(-50%, -50%), удобно когда родитель уже position: relative и нужно центрировать элемент поверх остального содержимого.
• Вертикальное центрирование текста в одну строку: line-height, равный высоте блока, старый приём но всё ещё рабочий для кнопок и бейджей.
• Частая ошибка: пытаться центрировать flex-контейнер через text-align, оно не действует на сам контейнер, только на инлайновое содержимое внутри.
• Если элементов несколько и нужно распределить их равномерно, вместо center возьмите justify-content: space-between или space-around.
• Для центрирования картинки внутри блока при неизвестных заранее пропорциях удобно совместить flex-центрирование родителя с object-fit: contain у самой картинки, тогда она не растянется и не обрежется криво.
• В grid ещё есть свойство place-self, оно позволяет центрировать не все элементы контейнера сразу, а конкретный один, если остальные должны остаться на своих местах.

у меня flex не центрировал, потому что я забыл высоту родителю задать, без height по вертикали центрировать нечего было

Проще всего display: flex, justify-content: center, align-items: center на родителе, это центрирует ребёнка сразу по обеим осям.