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

Есть несколько способов разместить текст в центре блока при помощи CSS. Рассмотрим два из них.

1. Метод таблицы

HTML:

<div class="block">
  <div class="cell">
    <p>Текст в середине</p>
  </div>
</div>

CSS:

.block {
  display: table;
  width: 100%;
  height: 300px;
}

.cell {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
}

p {
  font-size: 30px;
  font-weight: bold;
}

Здесь мы задаем родительский элемент блока как display: table и задаем ему высоту и ширину по своему усмотрению. Затем мы создаем дочерний элемент, который будет выступать в качестве ячейки таблицы. Мы устанавливаем display: table-cell и vertical-align: middle, чтобы текст был выровнен по вертикали в центре блока, а также устанавливаем text-align: center, чтобы текст был выровнен по горизонтали.

2. Метод flexbox

HTML:

<div class="block">
  <p>Текст в середине</p>
</div>

CSS:

.block {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 300px;
}

p {
  font-size: 30px;
  font-weight: bold;
}

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

Выбор метода зависит от того, как вы хотите управлять макетом сайта, и предпочтений при использовании различных свойств CSS. Результаты обоих методов будут аналогичными.