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

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

1. Используя свойство text-align: center; для блока, содержащего текст:

<div class="container">
  <p class="centered-text">Текст по центру</p>
</div>

<style>
  .container {
    text-align: center;
  }
  
  .centered-text {
    display: inline-block;
  }
</style>

Здесь мы устанавливаем свойство text-align: center; для блока .container, содержащего текст, и задаем класс .centered-text для элемента, который должен быть выровнен по центру. Также устанавливаем для этого элемента свойство display: inline-block;, чтобы он занимал только необходимое количество места на странице.

2. Используя свойство line-height в сочетании с height, чтобы текст помещался по центру блока:

<div class="container">
  <p class="centered-text">Текст по центру</p>
</div>

<style>
  .container {
    height: 300px;
    text-align: center;
  }
  
  .centered-text {
    height: 100%;
    line-height: 300px;
  }
</style>

Здесь мы задаем высоту блока .container, а затем устанавливаем высоту и line-height для элемента .centered-text, чтобы текст выравнивался по центру блока. Значение line-height должно быть равно высоте блока.

3. Используя свойство display: flex; в сочетании с align-items и justify-content:

<div class="container">
  <p class="centered-text">Текст по центру</p>
</div>

<style>
  .container {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 300px;
  }
  
  .centered-text {
    text-align: center;
  }
</style>

Здесь мы устанавливаем свойство display: flex; для блока .container и используем align-items: center; и justify-content: center;, чтобы выравнять содержимое блока по центру. Высоту блока задаем по желанию, а затем используем text-align: center; для элемента .centered-text, чтобы центрировать текст внутри блока.

Выбор способа зависит от особенностей вашей страницы и задачи. Поэтому можете выбирать то, что лучше всего подойдет.