Разница между свойствами justify-content и align-items в CSS для центрирования элементов заключается в том, что каждое из них отвечает за своё выравнивание:

• justify-content выравнивает элементы по главной оси (обычно по горизонтали), управляя распределением пространства внутри контейнера. 1
• align-items выравнивает элементы по поперечной оси (обычно по вертикали), управляя расположением элементов относительно друг друга внутри контейнера. 1

Таким образом, justify-content центрирует элементы по горизонтали, а align-items — по вертикали. 14

Оба свойства являются ключевыми для размещения элементов в макетах Flexbox и Grid. 1

Для центрирования элемента по перекрёстной оси (в данном случае — вертикальной) используется свойство align-items, а для центрирования элемента по главной оси (в данном случае — горизонтально) — justify-content. 3