Как выровнять форму по центру CSS

Чтобы выровнять форму по центру страницы с помощью CSS, можно использовать несколько способов.

1. С помощью свойства display и margin:

form {
  display: block;
  margin: auto;
}

В этом примере мы задаем свойство «display» со значением «block», которое заставляет форму расположиться на всю ширину доступной области. Затем мы задаем свойство «margin» со значениями «auto», которые выравнивают форму по центру страницы как по горизонтали, так и по вертикали.

2. С помощью свойств flexbox:

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

form {
  width: 50%;
}

В этом примере мы задаем свойство «display» элементу body со значением «flex», которое позволяет нам управлять размещением дочерних элементов. Свойства «justify-content» и «align-items» используются, чтобы выровнять форму по центру и по горизонтали, и «width» устанавливает ширину формы.

3. С помощью свойств Grid:

body {
  display: grid;
  place-items: center;
  height: 100vh;
}

form {
  width: 50%;
}

В этом примере мы используем свойство «display» со значением «grid», чтобы создать сетку элементов, и свойство «place-items» со значением «center», которое выравнивает элемент по оси x и y. Задаем также свойство «height» равное 100vh, чтобы форма занимала всю доступную высоту экрана. Свойство «width» устанавливает ширину формы.

Выбирайте любой из перечисленных выше способов в зависимости от ваших потребностей и предпочтений дизайна.