Чтобы расположить кнопку в центре HTML страницы, можно использовать 3 разных подхода:

  • margin: auto
  • div
  • flexbox

Разберем их подробнее.

Как использовать margin: auto для центрирования кнопки

Первый и, возможно, самый простой вариант — добавить кнопке CSS свойство margin: 0 auto, а затем добавить display: block, чтобы сделать кнопку в центре.

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

margin: 0 auto - это краткая форма установки верхнего и нижнего полей в 0 и левого и правого полей на авто.

Автоматическое поле — это то, что заставляет кнопку центрироваться. Тут важно, чтобы кнопка находилась внутри блока.

Как центрировать кнопку с помощью HTML тега div

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

Как будто ты размещаешь текст по центру.

div {
  text-align: center;
}

<div>
   <button>Centered button</button>
</div>

Обратной стороной этого подхода является то, что каждый раз, когда ты хочешь центрировать кнопку, тебе придется создавать новый элемент div только для этой кнопки.

А если у тебя много кнопок, которые требуют частого обновления стиля, поддерживать их быстро становится проблемой.

В таком случае лучше использовать первый вариант.

Короче говоря, если вы настаиваете на использовании этого подхода, сделайте это только для редких кнопок.

Как центрировать кнопку с помощью CSS flexbox

Третий вариант — использовать flexbox для центрирования кнопки.

Этот подход идеален, если ты уже используешь flexbox на веб-странице, а кнопка находится внутри родительского элемента.

Чтобы центрировать кнопку с помощью flexbox, ты должен сделать 2 вещи:

  • сначала добавь display: flex к родительскому элементу кнопки, чтобы активировать функции flexbox
  • затем добавь justify-content: center, чтобы кнопка была по центру

В приведенном ниже примере div является родительским элементом кнопки.

div {
  display: flex;
  justify-content: center;
}

<div>
   <button>Centered button</button>
</div>

Теперь ты знаешь 3 способа центрирования кнопки в CSS!

Получи мою бесплатную электронную книгу для подготовки к техническому собеседованию на JavaScript или начни Учить Full-Stack JavaScript прямо сейчас!