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

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

1. margin: 0 auto; — задает автоматические отступы сверху и снизу, а по горизонтали блок будет выровнен по центру.
2. display: flex; justify-content: center; align-items: center; — задает блоку свойство flex, а затем выравнивает его по центру по горизонтали и вертикали.
3. position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); — задает блоку абсолютное позиционирование, а затем с помощью transform сдвигает его на половину ширины и высоты влево и вверх.

Пример кода:

.center-block {
  width: 300px;
  height: 200px;
  background-color: #ccc;
  margin: 0 auto; /* выравнивание по центру по горизонтали */
}

.center-block-flex {
  display: flex;
  justify-content: center; /* выравнивание по центру по горизонтали */
  align-items: center; /* выравнивание по центру по вертикали */
}

.center-block-absolute {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); /* сдвиг на половину ширины и высоты */
}