Как отцентровать кнопку CSS

Существует несколько способов отцентровать кнопку в CSS, вот некоторые из них:

1. С помощью свойств text-align и display. Установите text-align: center у контейнера, чтобы центровать элементы внутри него, а затем установите display: inline-block и margin: 0 auto для самой кнопки:

.container {
  text-align: center;
}

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

2. С помощью свойства display и позиционирования. Установите position: relative у контейнера, чтобы сделать его контекстом для абсолютно позиционированной кнопки, а затем установите top: 50% и left: 50% у кнопки, чтобы переместить ее на 50% от верхнего и левого края контейнера, а также transform: translate(-50%, -50%) для центрирования по центру:

.container {
  position: relative;
  height: 100px; /* Задать высоту, чтобы кнопка была по центру по вертикали */
}

button {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

3. С помощью флексбоксов. Установите display: flex у контейнера, чтобы сделать его Flex-контейнером, а затем установите justify-content: center и align-items: center у контейнера, чтобы центровать содержимое (включая кнопку):

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

button {
  /* Никаких дополнительных стилей не требуется */
}

Заметьте, что поддержка свойств Flexbox и transform в браузерах может отличаться. Однако, все эти методы достаточно универсальны и работают во всех современных браузерах.