В чем разница между justify-content и align-items в CSS для центрирования элементов?

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

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

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

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

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