Центрування без висоти блоків у CSS

Розглядаємо роботу align-items: center без заданої висоти flex-елементів.

Центрування без висоти блоків у CSS

Властивість align-items: center працює навіть тоді, коли flex-елементам не задана фіксована висота.

У цьому випадку висота кожного блоку формується його вмістом, але самі елементи все одно вирівнюються по центру поперечної осі.

<div class="parent">
  <div class="child">
    Текст першого блоку
  </div>

  <div class="child">
    Текст другого блоку
  </div>
</div>

.parent {
  display: flex;
  align-items: center;

  height: 200px;
  border: 1px solid red;
}

.child {
  border: 1px solid green;
}

Дочірні блоки не мають властивості height, тому їхня висота залежить від кількості тексту всередині.

Незважаючи на це, align-items: center розміщує їх по центру контейнера.

❗ Важливо:

Для роботи align-items контейнер повинен мати вільний простір по поперечній осі. Якщо висота контейнера дорівнює висоті елементів, помітного переміщення не буде.

.child:first-child {
  padding: 20px;
}

.child:last-child {
  padding: 40px;
}

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

📌 Завдання:

№1. Створіть flex-контейнер висотою 300px.
№2. Додайте декілька блоків без height.
№3. Використайте align-items: center.
№4. Змініть кількість тексту всередині блоків і перевірте результат.

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

Не обов'язково задавати height для flex-елементів. Вона може формуватися автоматично від контенту.

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

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