CSS как выровнять текст по центру блока

Чтобы выровнять текст по центру блока в CSS, используется свойство text-align со значением center:

.centered-text {
  text-align: center;
}

В данном примере мы создали класс .centered-text и присвоили ему значение text-align: center. Когда этот класс будет применен к HTML-элементу, его текст автоматически выровняется по центру блока.

Этот способ также может быть использован для выравнивания изображения по центру блока, установив для этого text-align: center на родительском элементе изображения.

<div class="image-wrapper">
  <img src="mypicture.jpg">
</div>

Мы обернули изображение в блок div с классом «image-wrapper». Чтобы выровнять изображение по центру этого блока, мы написали следующий CSS:

.image-wrapper {
  text-align: center;
}

В этом примере изображение автоматически будет выровнено по центру блока div.