Issues with centering a html button horizontally?

[theblizzfreak]

Hello I'm having issues with my website my normal html buttons <button> hello </button> are not positioned horizontally in the center of the webpage there just vertically placed in the center even tho there is nothing that says vertical or horizontal in the CSS or HTML file ??? is there any way to make html buttons be in the center and be horizontally placed ?

button {
	   display: block; 
	   margin: 0 auto;  
	   background-color:darkgrey;
	   position:relative;   
}

[sunfighter]

Answered hundreds of times. Use search near top of page and enter "horizontal centering" and see what you get.

[Sammy12]

Warm welcome to the forums theblizzfreak,

This question is literally answered everywhere.

With margin: 0 auto, the browser calculates an equal margin on both sides of the button with the equation:
(parent width - button width) / 2 = margin on one sides.

<!-- Parent (browser knows this width) -->
<div>
    <!-- Button -->
    <button></button>
</div>

The browser cannot find the auto margin without the width of the button.

button {
	   display: block;
           width: #px; /* use the width of your button */
	   margin: 0 auto;  
	   background-color:darkgrey;
	   position:relative;   
}