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

Чтобы расположить блочный элемент (например, <div>) по центру страницы в CSS, можно использовать свойства position и transform. Вот пример кода:

.container {
  position: absolute; /* установить абсолютное позиционирование */
  top: 50%; /* разместить верхнюю границу элемента на 50% от верхнего края страницы */
  left: 50%; /* разместить левую границу элемента на 50% от левого края страницы */
  transform: translate(-50%, -50%); /* переместить элемент обратно на 50% от его ширины и высоты */
}

В этом примере свойство position: absolute устанавливает абсолютное позиционирование элемента внутри его ближайшего родительского элемента, который имеет установленное значение position: relative или position: absolute. Свойства top и left указывают расстояние от верхнего и левого краев страницы соответственно.

Затем свойство transform перемещает элемент назад на половину его ширины и высоты, чтобы элемент был выровнен по центру страницы как по горизонтали, так и по вертикали.

Обратите внимание, что для правильного центрирования элемента, как обычно, родительский элемент должен иметь ширину и высоту. Если вы хотите расположить элемент по центру страницы, то можете установить ширину и высоту на 100%:

html, body {
  height: 100%;
}

.container {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 80%; /* ширина элемента */
  height: 80%; /* высота элемента */
}

В этом случае, html и body имеют ширину и высоту, равные 100%, что гарантирует, что родительский элемент .container тоже будет иметь ширину и высоту в 100%.