Розташовуємо блок по центру

Доки не пішов спати, хотів поділитися кількома корисними рядками стилів, які центрують html-елемент по центру як горизонтально так і вертикально. Писати не багато, але коли не часто використовуєш цей спосіб або тільки вчишся, то не відразу його запам'ятаєш й корисно мати під рукою таку собі нотатку, де можна скопіювати вже готовий код.

Демо

Якщо потрібно відцентрувати вміст відносно екрану, то робимо html та body на всю висоту екрану, а далі за допомогою flexbox вже робимо всю магію. Якщо навколо цього вмісту ще маєте обгортку(наприклад div-блок), то задаєте й для неї стовідсоткову висоту.

Якщо центрувати треба відносно обгортки, а не всього екрану - тоді просто задаєте потрібну висоту власне тільки для неї, от і все.

html, body { height: 100%; }

.container {
  display: flex; /* встановлюємо флекс-блок */
  align-items: center; /* центруємо вміст горизонтально */
  justify-content: center; /* центруємо вміст вертикально */
  height: 100%; /* розтягуємо на всю висоту */
}

Здається нічого не забув. Добраніч :)