Як центрувати елемент по вертикалі за допомогою CSS (вертикальне вирівнювання)

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

1. Використання Flexbox

Найпростіший і поширений спосіб:

.container {
  display: flex;
  align-items: center; /* Centers vertically */
  justify-content: center; /* Optional: Centers horizontally */
  height: 100vh; /* Full viewport height, if needed. Or set your own height */
}

2. Використання Grid

CSS Grid також робить вертикальне центрування просто:

.container {
  display: grid;
  place-items: center; /* Centers both vertically and horizontally */
  height: 100vh; /* Full viewport height, if needed. Or set your own height */
}

Разом з Grid ви також можете використовувати align-items: center замість place-items: center

3. Використання position та transform

Для ситуацій, коли Flexbox або Grid не підходять:

.element {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

Цей метод центрує елемент відносно блоку, що його містить.

4. Використання line-height (однорядковий текст)

Якщо ви центруєте однорядковий текст:

.container {
  height: 100px; /* Example height */
  line-height: 100px; /* Match the height */
  text-align: center; /* Optional: Centers horizontally */
}

Це працює лише для однорядкових текстових елементів.

5. Використання table-cell

Для сумісності зі старими браузерами:

.container {
  display: table;
  height: 100vh; /* Full viewport height, if needed. Or set your own height */
  width: 100%; /* Optional */
}

.element {
  display: table-cell;
  vertical-align: middle;
  text-align: center; /* Optional: Centers horizontally */
}

Який метод використовувати?

• Використовуйте Flexbox або Grid для сучасних макетів.
• Використовуйте position + transform для конкретних сценаріїв або абсолютного позиціонування.
• Використовуйте line-height для центрування однорядкового тексту.