Как отцентровать текст в блоке CSS

Для отцентровки текста в блоке CSS можно использовать несколько свойств.

Способ 1: выравнивание по центру

HTML:

<div class="my-block">
  <p>Текст</p>
</div>

CSS:

.my-block {
  text-align: center;
}

Этот код использует свойство text-align: center;, которое выравнивает текст в блоке по центру.

Способ 2: флексбокс

HTML:

<div class="my-block">
  <p>Текст</p>
</div>

CSS:

.my-block {
  display: flex;
  justify-content: center;
  align-items: center;
  /* Можно также задать высоту и ширину блока */
  height: 200px;
  width: 200px;
}

Этот код использует свойство display: flex;, которое создает контейнер с гибким макетом, а затем свойство justify-content: center; и align-items: center; для выравнивания элементов внутри контейнера по центру как по горизонтали, так и по вертикали.

Способ 3: таблица

HTML:

<div class="my-block">
  <table>
    <tr>
      <td>Текст</td>
    </tr>
  </table>
</div>

CSS:

.my-block {
  display: table;
  text-align: center;
  /* Можно также задать высоту и ширину блока */
  height: 200px;
  width: 200px;
}

.my-block table {
  display: table-cell;
  vertical-align: middle;
}

Этот код использует свойство display: table;, которое создает блок, действующий как таблица, и затем свойство display: table-cell; и vertical-align: middle; для выравнивания элементов внутри таблицы по центру как по вертикали, так и по горизонтали.

Каждый из этих методов может быть использован в зависимости от конкретных требований макета.