Методы центрирования Div по вертикали и горизонтали на веб-странице

Чтобы центрировать

по вертикали и горизонтали, вы можете использовать несколько методов. Вот некоторые часто используемые методы:

  1. Флексбокс:

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

  2. CSS-сетка:

    .container {
     display: grid;
     place-items: center;
    }
  3. Абсолютное позиционирование и трансформация:

  4. Отображение таблицы:

    .container {
     display: table;
     width: 100%;
     height: 100%;
    }
    .centered {
     display: table-cell;
     text-align: center;
     vertical-align: middle;
    }
  5. CSS-сетка с автоматическими полями:

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

Эти методы можно использовать для центрирования элемента

как по вертикали, так и по горизонтали на странице. Выберите тот, который соответствует вашим конкретным потребностям и планировке.