Существует несколько способов отцентровать кнопку в CSS, вот некоторые из них:
- С помощью свойств
text-align
иdisplay
. Установитеtext-align: center
у контейнера, чтобы центровать элементы внутри него, а затем установитеdisplay: inline-block
иmargin: 0 auto
для самой кнопки:
.container {
text-align: center;
}
button {
display: inline-block;
margin: 0 auto;
}
- С помощью свойства
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%);
}
- С помощью флексбоксов. Установите
display: flex
у контейнера, чтобы сделать его Flex-контейнером, а затем установитеjustify-content: center
иalign-items: center
у контейнера, чтобы центровать содержимое (включая кнопку):
.container {
display: flex;
justify-content: center;
align-items: center;
}
button {
/* Никаких дополнительных стилей не требуется */
}
Заметьте, что поддержка свойств Flexbox и transform
в браузерах может отличаться. Однако, все эти методы достаточно универсальны и работают во всех современных браузерах.