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

Современный способ — Flexbox или Grid на родителе.

Варианты

/* Flexbox */
.parent {
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Grid, самый короткий */
.parent {
  display: grid;
  place-items: center;
}

/* Абсолютное позиционирование */
.child {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 200px;
  height: 100px;
}

Только по горизонтали

Блок с заданной шириной: margin-inline: auto. Текст: text-align: center.

Старые способы

transform: translate(-50%, -50%) с top: 50%; left: 50%. Он работает, но может давать размытый текст на дробных пикселях и сложнее в чтении.

Коротко для собеседования

Родителю достаточно display: grid; place-items: center или Flexbox с justify-content и align-items по центру.