Как выровнять по центру в CSS

h1 {
  text-align: center;
}

text-align: center центрирует строки текста и строчные элементы (ссылки, <span>, картинки, кнопки) внутри блока. Свойство пишут родителю: чтобы поставить по центру кнопку, text-align: center задают блоку, в котором она лежит.

.page {
  max-width: 800px;
  margin: 0 auto;
}

Автоматические отступы слева и справа делят свободное место поровну. Два условия: у блока задана ширина (width или max-width) меньше родителя, и это блочный элемент. Картинке для этого нужен display: block:

.photo {
  display: block;
  margin: 0 auto;
}

Подойдёт любой из двух способов. Свойства пишут контейнеру — блоку, внутри которого лежит то, что нужно поставить в центр.

Flexbox

.box {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 300px;
}

Всё, что внутри .box, встанет точно в центр. justify-content центрирует по горизонтали, align-items — по вертикали. Без высоты контейнера вертикально центрировать некуда: блок высотой с содержимое.

Центр всего окна — та же запись с min-height: 100vh (вся высота окна). У body при этом уберите стандартный отступ: margin: 0.

Grid

.box {
  display: grid;
  place-items: center;
  min-height: 300px;
}

Самая короткая запись: place-items: center центрирует по обеим осям сразу.

Окно-сообщение, которое висит в центре экрана над содержимым:

.modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

top и left по 50 % ставят в центр левый верхний угол блока, а transform сдвигает блок назад на половину его собственного размера.