Как центрировать блок по горизонтали и по вертикали?

Для центрирования блока по горизонтали и вертикали в CSS есть несколько способов. Один из самых универсальных и современных — использовать Flexbox.

Пример:

.parent {
  display: flex;
  justify-content: center; /* горизонтальное центрирование */
  align-items: center;    /* вертикальное центрирование */
  height: 100vh;          /* чтобы родитель занимал всю высоту окна */
}

.child {
  /* размеры блока */
  width: 200px;
  height: 100px;
  background-color: lightblue;
}

HTML:

<div class="parent">
  <div class="child">Центрированный блок</div>
</div>

Другие способы:

• Использование CSS Grid с place-items: center;
• Абсолютное позиционирование с top: 50%; left: 50%; transform: translate(-50%, -50%);

Но Flexbox проще и чаще всего предпочтителен для таких задач.