Как отцентрировать элемент

Короткий ответ

Включите flexbox на родителе и выровняйте по обеим осям:

<style>
  .stage { display: flex; justify-content: center; align-items: center; height: 120px; background: whitesmoke; }
</style>
 
<div class="stage">
  <div style="padding: 8px 16px; background: gold;">Centered</div>
</div>

justify-content двигает содержимое по главной оси (по горизонтали), align-items — по поперечной (по вертикали).

Самый короткий вариант на grid

В grid обе оси выравнивает одно свойство place-items:

<div style="display: grid; place-items: center; height: 120px; background: honeydew;">
  <button>Sign up</button>
</div>

Блок по горизонтали

Блоку с заданной шириной достаточно автоматических отступов слева и справа:

<div style="width: 200px; margin: 0 auto; padding: 8px; background: lavender;">A centered block</div>

Текст внутри блока

Текст и строчные элементы выравнивает text-align:

<p style="text-align: center;">Centered text</p>

Частая ошибка

Центрирование по вертикали «не работает», если у родителя нет высоты: блок высотой ровно в содержимое центрировать некуда. Задайте родителю height или min-height, как в примерах выше. Вторая частая путаница — text-align: center на блоке: он центрирует текст внутри, а не сам блок.