Текст по центру CSS

Выровнять текст по центру можно двумя способами. Как в первом примере, можно добавить к тегу p класс, и применить к нему свойство text-align со значением center, а затем добавить этот класс там, где это необходимо. Если текст находится в блоке, можно добавить к нему свойства Flexbox CSS, как показано во втором примере.

Пример

Lorem Ipsum

HTML


<!-- Текст по центру с помощью text-align: center; -->
<p class="text-center">Lorem Ipsum</p>

<!-- Текст по центру с помощью Flexbox CSS -->
<div class="text-ex">
  <p class="text-ex-title">Lorem Ipsum</p>
</div>

CSS


/* Текст по центру с помощью text-align: center; */
.text-center{
  text-align: center; /* Текст по центру */
  color: #a8d7e1; /* Цвет текста */
}

/* Текст по центру с помощью Flexbox CSS */
.text-ex{
  display: flex;
  justify-content: center;
  align-items: center;
  height: 125px;
  background: #a8d7e1;
}