Как сделать кнопку посередине css

Чтобы сделать кнопку посередине страницы с помощью CSS, следуйте этим шагам:

1. Оберните кнопку в блочный элемент с помощью тега div:

<div class="button-wrapper">
  <button class="button">Нажми меня</button>
</div>

2. Используйте следующие стили для обертки кнопки:

.button-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

Здесь мы используем свойство display: flex для размещения кнопки внутри обертки и задаем свойство justify-content: center для горизонтального центрования кнопки и align-items: center для вертикального центрования кнопки. Мы также задаем высоту обертки height: 100vh, чтобы она занимала всю высоту видимой области.

3. Добавьте стили для кнопки:

.button {
  padding: 10px 20px;
  border: 2px solid #2a4d6d;
  border-radius: 20px;
  background-color: #fff;
  color: #2a4d6d;
  font-size: 16px;
  font-weight: bold;
  text-transform: uppercase;
  cursor: pointer;
}

Здесь мы добавляем стили для кнопки, которые определяют ее размеры, цвет, шрифт и прочие свойства.

4. Выравнивайте кнопку по центру по горизонтали:

.button-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

5. Выравнивайте кнопку по центру по вертикали:

.button-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  flex-direction: column;
}

.button {
  margin-top: auto;
  margin-bottom: auto;
}

Здесь мы изменяем направление расположения элементов flex-direction: column, чтобы кнопка отображалась по центру вертикальной оси. Мы также используем свойства margin-top: auto и margin-bottom: auto для кнопки, чтобы она сдвигалась вверх и вниз относительно остальных элементов flex-контейнера.

6. Добавьте стили для обертки, чтобы кнопка была выровнена по центру по горизонтали и вертикали:

.button-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  flex-direction: column;
  text-align: center;
}

Здесь мы добавляем свойство text-align: center, чтобы отцентрировать кнопку по горизонтали внутри обертки.

Теперь ваша кнопка будет отображаться по центру страницы.