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

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

1. Использование свойств text-align и vertical-align для выравнивания содержимого элемента. Примените эти свойства к родительскому элементу, а затем добавьте display: inline-block; к самому элементу.

CSS код:

.parent-element {
  text-align: center;
}

.child-element {
  display: inline-block;
  vertical-align: middle;
}

2. Использование свойства margin с автоматическим значением для левого и правого отступов элемента. Примените это свойство к самому элементу, а затем установите ширину и высоту в пикселях (можно добавить max-width и max-height, чтобы сохранить пропорции элемента):

CSS код:

.child-element {
  width: 300px;
  height: 200px;
  max-width: 100%;
  max-height: 100%;
  margin: auto;
}

3. Использование свойств flexbox. Примените свойство display: flex; к родительскому элементу и добавьте align-items: center; и justify-content: center; для выравнивания элемента по центру.

CSS код:

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

.child-element {
  /* ваш код стилей */
}

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