1) flex + margin: Современный способ выравнивания элементов по горизонтали и вертикали заключается в сочетании display: flex и margin: auto: Справедливости ради следует отметить, что тоже самое можно реализовать с помощью такого сниппета: 2) flex + gap: Раз уж мы заговорили о Flexbox, нельзя не упомянуть, что не так давно у нас появилась возможность добавлять отступ между flex-элементами с помощью свойства gap (этой возможности чертовски не хватало): 3) inline-flex: Данное свойство позволяет создавать строчные элементы, обладающие функциональностью Flexbox...
Центрировать элементы по горизонтали в CSS невероятно просто: если это строковый элемент, то мы применяем text-align: center к его предку, а если это блочный элемент, то мы применяем margin: auto к нему самому. Но одной мысли о том, чтобы центрировать элемент по вертикали, достаточно, чтобы по спине пробежали холодные мурашки...