Как центрировать текст в css

Для центрирования текста по горизонтали в CSS используют свойства text-align и display. Вот несколько способов, как можно это сделать:

1. Центрирование текста внутри блока

Для центрирования текста внутри блока используется свойство text-align: center;. Например, для центрирования текста заголовка можно использовать следующий код:

h1 {
  text-align: center;
}

2. Центрирование блока внутри wrapping-блока

Для центрирования блока внутри wrapping-блока можно использовать свойство display: flex со значениями justify-content и align-items. Для центрирования по горизонтали используйте justify-content: center, а для центрирования по вертикали align-items: center. Например, для центрирования блока содержимого можно использовать следующий код:

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

3. Центрирование блока по центру страницы

Для центрирования блока по центру страницы можно использовать комбинацию свойств position, top, left, transform. Например, для центрирования блока содержимого можно использовать следующий код:

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

В данном случае блок будет располагаться по центру страницы, но не будет центрироваться внутри wrapping-блока.

Выберите подходящий метод в зависимости от задачи, и примените его к своему коду.