Центрирование элементов на веб-странице — это одна из наиболее распространенных задач, с которой мы сталкиваемся при работе с макетами. И хотя центрирование текста по горизонтали довольно простое (text-align: center; и делов-то), вертикальное центрирование может быть немного сложнее. Давайте рассмотрим несколько методов.

Метод 1: Flexbox

Flexbox — это один из самых простых и эффективных способов центрирования.

Заворачиваем текст в <div> с классом center-both:

<div class="center-both">
  <p>Центрированный текст</p>
</div>

И флексим:

.center-both {
  display: flex;
  justify-content: center;
  align-items: center;
}

Получается так:

Метод 2: CSS Grid

HTML такой же, как в предыдущем примере. В CSS включаем гриды и используем свойство place-items со значением center:

.center-both {
  display: grid;
  place-items: center;
}

Результат:

Работает.

Метод 3: позиционирование и Transform

Этот метод немного старомодный и работает не идеально. Здесь у div устанавливается relative позиция. А <p> внутри дива мы сдвигаем с помощью абсолютного позиционирования. Не слишком элегантно:

.center-both {
  position: relative;
}

.center-both p {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

HTML остается таким же. Вот что получается:

Плохой метод: использование line-height

Если у вас однострочный текст, вы можете установить line-height, равный высоте родительского элемента.

.center-both {
  line-height: 200px; /* Пример высоты */
  text-align: center;
}

Этот метод не подойдет для многострочного текста. Да и вообще мы очень не рекомендуем так делать, это прям совсем для любителей острых ощущений. Потому что вот:

Если вам интересно узнать больше о каждом из этих методов, рекомендуем посмотреть документацию по Flexbox на MDN или документацию по CSS Grid на MDN, а ещё пройти курсы в HTML Academy.

Начать обучение

🐈