Как центрировать блок css?

Откуда 43 пикселя сверху

Скорее всего, это margin-top первого потомка — классический сброс отступа у <h1>, <p>, <ul> или <form> через * { margin: 0 } не сработал, либо браузерный дефолтный отступ никуда не делся. Проверьте в DevTools, чей именно margin даёт эти 43px.

Вторая частая причина — line-height и baseline первого текстового элемента: если у контейнера display: flex; align-items: center с незаданной высотой, лишних пикселей быть не должно, а вот если блок просто margin: 0 auto, то отступы детей остаются как есть.

Как центрировать по вертикали без заданной высоты

Если высота родителя неизвестна, классический margin: auto и top: 50% не сработают. Рабочие варианты:

1. Flex-контейнер (самый надёжный)

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

2. Grid

.parent {
  display: grid;
  place-items: center;
  min-height: 100vh;
}

3. Если центрируете абсолютно позиционированный элемент

.child {
  position: absolute;
  inset: 0;
  margin: auto;
  /* работает только если у элемента заданы width и height */
}

Как убрать лишние 43px

/* сброс дефолтных margin у типовых элементов */
h1, h2, h3, p, ul, ol, form, figure {
  margin: 0;
}

Либо точечно: найдите в DevTools элемент, у которого margin-top: 43px (обычно это margin-block-start у <h1>/<p> или padding у <body>), и обнулите его.

Если высота родителя действительно не задана и центрировать «на глаз» не получается — задайте min-height: 100vh (или 100dvh для мобильных), тогда align-items: center отработает корректно, и лишние отступы детей просто исчезнут после сброса margin.

Вертикальное центрирование без заданной высоты делается так:

1. Flexbox или Grid на родителе (рекомендуется)

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

Или Grid, он короче:

.parent {
  display: grid;
  place-items: center;
  min-height: 100vh;
}

2. Абсолютное позиционирование

.parent {
  position: relative;
  height: 100vh;
}
.child {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

Откуда лишние 43 пикселя сверху

Скорее всего, это внешний отступ (margin) дочернего элемента, а не отступ от центрирования. Обычно причина одна из следующих:

1. Margin схлопывается с родителем. Если у h1, p, ul и т.п. есть margin-top, а у родителя нет padding или border сверху, этот margin «вытягивает» родителя вниз. Сам блок при этом тоже смещается.
2. Браузерные стили по умолчанию. У h1–h6, p, ul заданы margin. Например, у h2 с размером 24px он около 0.83em, то есть примерно 20px сверху и снизу.
3. Body margin. По умолчанию у body отступ 8px.

Что сделать:

/* сброс отступов, если не нужны */
h1, h2, h3, p, ul {
  margin: 0;
}

/* или запретить схлопывание margin родителя */
.parent {
  display: flow-root;
}

/* или сбросить отступы у body */
body {
  margin: 0;
}

Проверьте в DevTools (F12): наведите курсор на элемент и посмотрите, какой именно margin или padding даёт эти 43px. Обычно это сразу видно в блоке Box Model.

Если нужно центрировать блок по вертикали и горизонтали, задайте родителю display: flex. Высоту самого блока указывать не нужно:

html,
body {
  margin: 0;
}

.parent {
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

Лишние 43 пикселя обычно появляются не из-за неопределённой высоты блока, а из-за отступов или размеров родителя. Проверьте:

• стандартный отступ body — обычно 8px;
• margin у заголовков (h1, h2) и абзацев (p);
• отступы у самого блока;
• не добавлен ли где-то padding-top или transform: translateY(...).

Для проверки временно задайте * { margin: 0; } и посмотрите, исчезнет ли смещение. Если центрируете не относительно всего окна, а внутри контейнера, у этого контейнера должна быть задана высота или min-height.