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

Метод 1: Flexbox
Вы можете использовать Flexbox для выравнивания по центру. Примените следующий CSS к родительскому контейнеру:

по центру;
align-items: по центру;

Метод 2: сетка
Вы также можете использовать сетку CSS для центрирования элемента. Примените следующий CSS к родительскому контейнеру:

.container {
  display: grid;
  place-items: center;
}

Метод 3. Абсолютное позиционирование с помощью Transform
Этот метод предполагает использование абсолютного позиционирования и свойства transform. Примените следующий CSS к элементу, который вы хотите центрировать:

Метод 4: ячейка таблицы
Выровнять по центру можно, используя свойства отображения ячейки таблицы. Примените следующий CSS к родительскому контейнеру:

.container {
  display: table-cell;
  text-align: center;
  vertical-align: middle;
}

Метод 5: CSS-сетка с автоматическими полями
Другой способ центрировать элемент — использовать CSS-сетку и автоматические поля. Примените следующий CSS к родительскому контейнеру:

.container {
  display: grid;
}
.element {
  margin: auto;
}

Метод 6: Flexbox с автоматическими полями
Вы также можете использовать автоматические поля с flexbox для выравнивания по центру. Примените следующий CSS к родительскому контейнеру:

.container {
  display: flex;
}
.element {
  margin: auto;
}

Это некоторые из часто используемых методов центрирования элементов как по вертикали, так и по горизонтали с помощью CSS. Выберите метод, который лучше всего соответствует вашим конкретным требованиям и дизайну.