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

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

1. display: flex; — устанавливает контейнеру гибкую модель блока
2. justify-content: center; — выравнивает элементы по горизонтали по центру
3. align-items: center; — выравнивает элементы по вертикали по центру

Пример:

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

Также можно использовать свойство margin со значениями auto для автоматического выравнивания по центру:

.container {
  margin: auto;
}

Оба способа работают для блочных элементов.