horizontal - centrar texto verticalmente en celda html

¿Cómo puedo centrar horizontalmente un elemento de botón en un elemento div?

Question

No quiero agregar CSS a mi elemento div (por ejemplo, <div style="text-align: center;"> ). Solo quiero añadir código CSS al elemento botón.

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

¿Cómo puedo centrar el botón horizontalmente en este caso?

Answer 1

Necesitas display: block; margin: auto; display: block; margin: auto; en el <button> . jsFiddle

Answer 2

Otros ya han mencionado el margin: 0 auto; método, pero si desea una explicación, el navegador divide el espacio disponible en el contenedor en el que se encuentre su elemento.

También es importante señalar que es probable que también debas darle un ancho a tu elemento para que esto funcione correctamente.

Entonces, en general:

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

Answer 3

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

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

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