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

Для центрирования кнопки в CSS можно использовать один из следующих подходов:

Свойство text-align. Если кнопка находится внутри блочного элемента, можно использовать свойство text-align для его центрирования:

button {
    display: block;
    margin: 0 auto;
    text-align: center;
}

Это свойство выравнивает содержимое элемента по центру по горизонтали.

Свойство margin. Еще один популярный способ центрирования — это использование свойства margin с авто значением:

button {
    display: block;
    margin: auto;
}

Это свойство автоматически выравнивает элемент по горизонтали и вертикали внутри родительского блока.

Свойство flex. Для центрирования кнопки можно использовать модуль гибких контейнеров с помощью display: flex;. Этот подход дает большую гибкость при создании сетки и центрировании элементов:

.container {
  display: flex;
  justify-content: center;
  align-items: center;
}
button {
  margin: 0 auto;
}

Этот код центрирует кнопку внутри блока с классом .container как по вертикали, так и по горизонтали.

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

Поделиться в: