Как разместить текст по центру в css

Существует несколько способов разместить текст по центру с помощью CSS.

С помощью margin и text-align свойств

Самый простой способ — это задать margin: 0 auto; для объекта и text-align: center; для его содержимого:

.container {
  margin: 0 auto;
  text-align: center;
}

С помощью display: flex

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

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

С помощью position и transform

Другой способ центрирования текста — это использование свойств position и transform:

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

В этом случае, позиция объекта задается на 50% относительно родительского объекта, а затем с помощью transform свойства он смещается на свою собственную половину ширины и высоты.

Теперь вы знаете несколько способов разместить текст по центру при помощи CSS. Какой метод использовать — зависит от ситуации, в которой вы находитесь, и от того, как вы хотите сделать эффект на вашей странице.