Как сделать кнопку по центру html

Для того чтобы центрировать кнопку на странице, можно использовать следующий метод:

1. Создадим кнопку

<body>
    <button></button>
</body>

2. В CSS установим свойство для кнопки display: flex без него следующее свойство не будет работать - это margin: 0 auto; Он и осуществляет центрирование кнопки. Код выглядит так:

button {
    display: flex;
    margin: 0 auto;
}

Для того чтобы центрировать кнопку на странице, можно использовать следующий код:

<div style="text-align:center">
  <button>Кнопка</button>
</div>

В данном примере кнопка будет находиться внутри блока <div>, у которого задано свойство text-align:center. Это свойство позволяет выравнивать содержимое блока по центру.

Если нужно выровнять не только горизонтально, но и вертикально, то можно использовать следующий код:

<div
  style="display:flex; justify-content:center; align-items:center; height:100vh;"
>
  <button>Кнопка</button>
</div>

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

Кнопка — строчный элемент, поэтому по горизонтали её центрируют свойством text-align: center у родителя:

<div class="actions">
  <button>Отправить</button>
</div>

Через flexbox

Flexbox центрирует и по горизонтали, и по вертикали:

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

Центр всего экрана:

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

Без обёртки

Если сделать кнопку блочной, её центрирует margin: auto:

button {
  display: block;
  margin: 0 auto;
}

Через grid

.actions {
  display: grid;
  place-items: center;
  height: 200px;
}

Несколько кнопок по центру

.actions {
  display: flex;
  justify-content: center;
  gap: 12px;
}

gap задаёт расстояние между кнопками.

Почему не центрируется

• text-align: center задали самой кнопке — так центрируется только текст внутри неё. Свойство нужно родителю.
• margin: 0 auto не работает у строчной кнопки — добавьте display: block.
• Вертикальное центрирование не работает — у родителя нет высоты. Задайте height или min-height.

Выравнивание и flexbox разбирают в курсе «Профессиональная вёрстка».