Значення center властивості align-items у CSS

Вивчаємо вирівнювання flex-елементів по центру поперечної осі за допомогою значення center властивості align-items.

Значення center властивості align-items дозволяє розмістити flex-елементи по центру поперечної осі.

Напрямок поперечної осі залежить від властивості flex-direction. Тому результат буде різним для row і column.

.parent {
  display: flex;
  flex-direction: row;
  align-items: center;
}

У цьому випадку flex-елементи залишаються в рядку, але переміщуються до центру поперечної осі.

.parent {
  display: flex;
  flex-direction: column;
  align-items: center;
}

❗ Важливо:

align-items: center не центрує елементи по головній осі. Для головної осі використовується justify-content: center.

.parent {
  display: flex;

  justify-content: center;
  align-items: center;
}

У такому випадку елементи будуть знаходитися в центрі контейнера незалежно від розміру вільного простору.

align-items: center вирівнює елементи по центру поперечної осі.
При flex-direction: row центр буде по вертикалі.
При flex-direction: column центр буде по горизонталі.
Для центрування по головній осі використовуйте justify-content.
Для повного центрування використовуйте justify-content: center та align-items: center.

📌 Завдання:

💡 Показати підказку

Пам'ятайте: align-items працює тільки з поперечною віссю, а justify-content — з головною.

✅ Показати відповідь

.parent {
  display: flex;
  justify-content: center;
  align-items: center;
}