Разница между центрированием по вертикали и горизонтали в CSS заключается в том, что при горизонтальном центрировании легко определить ширину родительского элемента: если она не задана явно, то обычно равна ширине экрана. 1 При вертикальном центрировании высоту родительского элемента приходится задавать явно с помощью свойства height. 1

Для горизонтального центрирования можно использовать свойство justify-content: center, которое выравнивает дочерние элементы по горизонтальной оси внутри родительского элемента. 4 Для вертикального центрирования — свойство align-items: center, которое выполняет ту же функцию, но уже по вертикальной оси. 4

Также при горизонтальном центрировании легко определить ширину родительского элемента, а при вертикальном — высоту приходится задавать явно. 1