How can I horizontally center a button element in a div element?

I don't want to add CSS to my div element (e.g. <div style="text-align: center;">).

I only want to add CSS code to the button element.

<div>
  <button>Button</button>
</div>

How can I center the button horizontally in this case?

Solution 1:

button {
    margin:0 auto;
    display:block;
}

button {
  margin: 0 auto;
  display: block;
}

<div>
  <button>Button</button>
</div>

Solution 2:

Others have already mentioned the margin: 0 auto; method, but if you wanted an explanation, the browser splits up the available space in whatever container your element is in.

Also important to point out is you'll probably need to give your element a width, too, for this to work correctly.

So, overall:

button {
    display:inline-block; //Typically a button wouldn't need its own line        
    margin:0 auto;
    width: 200px; //or whatever
}