Как разместить div по центру CSS

Разместить DIV по центру страницы можно несколькими способами в CSS. Вот примеры двух методов:

1. С помощью свойств «position» и «transform»:

HTML:

<div class="container">
  <div class="centered-div">
    <p>Этот DIV размещен по центру страницы</p>
  </div>
</div>

CSS:

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

.centered-div {
  background-color: #ccc;
  padding: 20px;
  position: absolute;
  transform: translate(-50%, -50%);
  left: 50%;
  top: 50%;
}

В этом методе родительский элемент DIV («.container») имеет свойства «display: flex;», «justify-content: center;», «align-items: center;», чтобы разместить DIV по центру страницы как по горизонтали, так и по вертикали. Дочерний элемент DIV («.centered-div») имеет свойства «position: absolute;», «left: 50%;», «top: 50%;», которые размещают его по центру родительского DIV в сочетании с свойством «transform: translate(-50%, -50%);», которое точно центрирует его.

2. С помощью свойства «display» и «margin»:

HTML:

<div class="centered-div">
  <p>Этот DIV размещен по центру страницы</p>
</div>

CSS:

.centered-div {
  background-color: #ccc;
  padding: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100vh;
  margin: auto;
}

В этом методе элемент DIV («.centered-div») имеет свойства «display: flex;», «justify-content: center;», «align-items: center;», чтобы центрировать его по горизонтали и вертикали. Он также имеет свойства «width: 100%;», «height: 100vh;», чтобы занять всю ширину и высоту страницы. Наконец, свойство «margin: auto;» размещает его по центру страницы.

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