Для центрирования кнопки в 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 как по вертикали, так и по горизонтали.
Важно учитывать контекст, в котором находится кнопка, и выбирать соответствующий подход к ее центрированию.





