Как поставить элементы по центру CSS

Есть несколько способов поставить элементы по центру с помощью CSS:

1. Для блочных элементов можно использовать свойство text-align со значением center:

.container {
  text-align: center;
}

.element {
  display: inline-block;
}

2. Для элементов с известной шириной можно использовать свойство margin со значениями auto:

.container {
  width: 500px;
}

.element {
  width: 200px;
  margin: 0 auto;
}

3. Для элементов с неизвестной шириной можно использовать свойство display со значением flex и свойства justify-content и align-items со значением center:

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

.element {
  /* стили элемента */
}