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

Question

I don\'t want to add CSS to my div element (e.g.

).

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

<

相关标签:

Answer 1

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

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

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

Answer 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
}

Answer 3

You need display: block; margin: auto; on the <button>. jsFiddle