Чтобы центрировать
по вертикали и горизонтали, вы можете использовать несколько методов. Вот некоторые часто используемые методы:
-
Флексбокс:
по центру;
align-items: center;
} -
CSS-сетка:
.container { display: grid; place-items: center; }
-
Абсолютное позиционирование и трансформация:
-
Отображение таблицы:
.container { display: table; width: 100%; height: 100%; } .centered { display: table-cell; text-align: center; vertical-align: middle; }
-
CSS-сетка с автоматическими полями:
.container { display: grid; } .centered { margin: auto; }
Эти методы можно использовать для центрирования элемента
как по вертикали, так и по горизонтали на странице. Выберите тот, который соответствует вашим конкретным потребностям и планировке.