Как выровнять блок по середине CSS

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

<div class="wrapper">
  <div class="center">
    <h1>Заголовок</h1>
    <p>Текст</p>
  </div>
</div>

.wrapper {
  text-align: center;
}

.center {
  display: inline-block;
  text-align: left;
}

Здесь text-align: center; — задает выравнивание по центру для родительского блока.

display: inline-block; установит блоку ширину, которая будет равна минимально необходимой ширине содержимого, и разрешит выравнивание по горизонтали с другими элементами на той же строке.

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

<div class="wrapper">
  <div class="center">
    <h1>Заголовок</h1>
    <p>Текст</p>
  </div>
</div>

.wrapper {
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.center {
  text-align: center;
}

Здесь height: 100vh; — устанавливает высоту родительского элемента на 100% высоты окна браузера.

display: flex; — устанавливает режим flexbox для выравнивания элементов по центру как по горизонтали, так и по вертикали.

align-items: center; justify-content: center; — устанавливают выравнивание блока по центру как по вертикали, так и по горизонтали.

Обратите внимание, что flexbox может иметь некоторые проблемы с поддержкой в старых браузерах.