How to center a button using CSS?

Button is an inline element. It can not be centered using the “margin:auto;” that is for block element. Even if you set “display:inline-block” for it, the “margin:auto;” still has no effects. You can set “display:block” for it to change it to a block element and center it with “margin:auto;”.

Don’t try to use “text-align:center” for the button as it is used to center the text on the button rather the button itself. You can, however, apply “text-align:center” to the parent block element of the button to center the button. It is a little unnatural because “text-align:center” is for text in the literal meaning. But it can also be used to center the inline elements such as button contained in it.

Other methods for centering a button include applying the relative positioning to the button, together with the margin-left or transform:translateX(-50%) properties.

If you like my content, please consider buying me a coffee. Buy me a coffeeBuy me a coffee Thank you for your support!

Comments are closed, but trackbacks and pingbacks are open.