Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов, которые можно использовать:

Метод 1: Использование Flexbox (рекомендуется для современных браузеров)

<div class="container">
  <!-- content goes here -->
</div>

.container {
   display: flex;
   justify-content: center; /* Horizontally center the content */
   align-items: center; /* Vertically center the content */
}

В этом методе к элементу-контейнеру (родительскому <div>) применяется свойство dispay: flexproperty, а затем используются justify-content: centert для горизонтального выравнивания содержимого и align-items: center для вертикального выравнивания содержимого внутри контейнера.

Метод 2: Использование абсолютного позиционирования

<div class="container">
  <div class="centered">
    <!-- Content goes here -->
  </div>
</div>

.container {
  position: relative; /* Ensure relative positioning for absolute centering */
}

.centered {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); /* Shift the element back by 50% of its own width and height */
}

В этом методе элементу контейнера ( &lt.div class="container"&gt.) относительное позиционирование, а затем применить абсолютное позиционирование к дочерним элементам &lt.div&gt. элемент (с классом .по центру). Свойства top: 50% и left: 50% размещают элемент на 50% ширины и высоты контейнера. Преобразование: translate(-50%, 50%). свойство сдвигает элемент назад на 50% от его ширины и высоты, эффективно центрируя его как по горизонтали, так и по вертикали.

Метод 3: Использование сетчатой компоновки (рекомендуется для современных браузеров)

<div class="container">  
  <!-- Content goes here -->
</div>

.container {
  display: grid;
  place-items: center; /* Center the content both horizontally and vertically */
}

В этом методе к элементу-контейнеру (родительскому <div>) применяется свойство display: grid, а затем с помощью place-items: center содержимое выравнивается по горизонтали и вертикали внутри контейнера.

Выберите метод, наиболее соответствующий вашим требованиям и поддержке браузера.