Как выровнять элемент по центру css

Чтобы выровнять элемент по центру с помощью CSS, можно использовать два свойства: text-align и margin.

text-align: center — это свойство выравнивает текст элемента по центру. Например, чтобы выровнять заголовок <h1> по центру, нужно добавить следующий код в CSS:

h1 {
  text-align: center;
}

Это выровняет текст внутри элемента <h1> по центру, но сам элемент все еще будет на левой стороне страницы.

margin: 0 auto — это свойство задает отступы для элемента. При использовании margin: 0 auto, элемент будет отступать от верхнего и нижнего края на 0 пикселей, а от правого и левого краев на одинаковое количество пикселей (автоматически), что приведет к центрированию элемента по горизонтали.

Например, чтобы выровнять блок <div> по центру, нужно добавить следующий код в CSS:

div {
  margin: 0 auto;
}

Это выровняет блок <div> по центру страницы (по горизонтали), но сам блок все еще будет прижат к верхней части страницы.

Если нужно выровнять элемент как по горизонтали, так и по вертикали, можно использовать свойство display: flex и выравнивать элементы внутри контейнера с помощью свойств justify-content и align-items.

Например, чтобы выровнять блок <div> по центру страницы (по горизонтали и по вертикали), нужно добавить следующий код в CSS:

body {
  display: flex;
  justify-content: center; /* выравнивание по горизонтали */
  align-items: center; /* выравнивание по вертикали */
}
div {
  width: 200px;
  height: 200px;
}

Это выровняет блок <div> по центру страницы (по горизонтали и по вертикали), предполагая, что он имеет ширину и высоту 200 пикселей.