Как расположить блок по центру в css

Чтобы расположить блок по центру страницы, можно использовать следующий CSS-код:

.block {
  width: 200px;
  height: 200px;
  margin: auto;
  background-color: #f2f2f2;
}

В этом примере создается блок с размерами 200px на 200px, цветом фона #f2f2f2 и классом .block. Для того чтобы этот блок был расположен по центру страницы, задано свойство margin со значением auto.

Применение margin: auto; к блоку с фиксированной шириной центрирует его горизонтально на экране.

Также можно использовать тег-обертку, чтобы точно центрировать блок, например:

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

.block {
  width: 200px;
  height: 200px;
  background-color: #f2f2f2;
}

HTML-код:

<div class="wrapper">
  <div class="block"></div>
</div>

В этом примере создается тег-обертка .wrapper с display: flex, чтобы выровнять блок .block по центру страницы и по вертикали и по горизонтали. С помощью height: 100vh; задано свойство высоты на всю высоту окна браузера.

Еще один способ центрирования блока по горизонтали — это использовать свойство text-align: center; для родительского элемента:

.parent {
  text-align: center;
}

.block {
  display: inline-block;
  background-color: #f2f2f2;
}

HTML-код:

<div class="parent">
  <div class="block"></div>
</div>

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