如何在 div 元素中水平居中按钮元素？

Question

I don't want to add CSS to my div element (eg <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?

Answer 1

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

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

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

Answer 2

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

Answer 3

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
}