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

Flexbox:

• С родителем:

  .parent {
    display: flex; // Активируем флекс-контейнер
    justify-content: center; // Центрируем по горизонтали
    align-items: center; // Центрируем по вертикали
  }
  

Grid:

• С родителем:

  .parent {
    display: grid; // Активируем грид-контейнер
    place-items: center; /* Центрирует как по горизонтали, так и по вертикали.
                            Эквивалентно:
                            justify-items: center;
                            align-items: center; */
  }
  

Position: absolute и Transform:

.parent {
  position: relative; // Родитель должен быть позиционирован
}

.child {
  position: absolute; // Абсолютное позиционирование
  top: 50%; // Перемещаем верхний край на 50% от родителя
  left: 50%; // Перемещаем левый край на 50% от родителя
  transform: translate(-50%, -50%); /* Сдвигаем элемент на половину
                                       его собственной ширины и высоты
                                       для точного центрирования */
}

Margin: auto (только для горизонтального центрирования inline-block и block):

.element {
  display: block; // Или inline-block
  width: certain-width; // Ширина должна быть задана
  margin: 0 auto; // Автоматические отступы слева и справа
}