Как отцентровать блок в css

Чтобы отцентровать блок по вертикали и горизонтали на CSS, можно использовать свойства transform и position.

1. По вертикали и по горизонтали с использованием этих свойств:

.container {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

Здесь мы задаем позиционирование absolute элемента .container и задаем ему значение свойства top и left в 50%, чтобы выровнять блок по центру родительского элемента по горизонтали и вертикали. Затем мы используем свойство transform для перевода блока на половину своей ширины и высоты влево и вверх.

2. По вертикали и по горизонтали с использованием только свойства display:

.container {
    display: flex;
    justify-content: center;
    align-items: center;
}

Здесь мы устанавливаем для контейнера класса .container свойство display:flex. С помощью justify-content: center задаем выравнивание по горизонтали по центру родительского элемента, а align-items: center – выравнивание по вертикали по центру родительского элемента.

3. Только по горизонтали:

.container {
  margin: 0 auto;
  width: 50%; /* Изменить значение ширины по необходимости */
}

Здесь мы задаем блоку .container свойство margin: 0 auto. Это приведет к тому, что блок будет центрирован по горизонтали внутри родительского элемента. Не забудьте изменить значение ширины по необходимости.

4. Только по вертикали:

.container {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}

Здесь мы задаем позиционирование блока .container как relative, затем задаем значение свойства top в 50%, чтобы сдвинуть блок вниз на половину его высоты. Затем используем свойство transform для перемещения блока вверх на половину его высоты.