¿Cómo centrar un botón dentro de un div?

Tengo un div cuyo ancho es del 100%.

Me gustaría centrar un botón dentro de él, ¿cómo podría hacer esto?

<div style="width:100%; height:100%; border: 1px solid">
  <button type="button">hello</button>
</div>

Respuesta actualizada

Actualizando porque noté que es una respuesta activa, sin embargo, Flexbox sería el enfoque correcto ahora.

Demo en vivo

Alineamiento vertical y horizontal.

#wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
}

Solo horizontal (siempre que el eje flexible principal sea horizontal, que es el valor predeterminado)

#wrapper {
  display: flex;
  justify-content: center;
}

Respuesta original usando un ancho fijo y sin flexbox

Si el póster original desea una alineación vertical y central, es bastante fácil para el ancho y la altura fijos del botón, intente lo siguiente

Demo en vivo

CSS

button{
    height:20px; 
    width:100px; 
    margin: -20px -50px; 
    position:relative;
    top:50%; 
    left:50%;
}

solo para alineación horizontal use

button{
    margin: 0 auto;
}

o

div{
    text-align:center;
}

Podrías simplemente hacer:

<div style="text-align: center; border: 1px solid">
  <input type="button" value="button">
</div>

O podrías hacerlo así:

<div style="border: 1px solid">
  <input type="button" value="button" style="display: block; margin: 0 auto;">
</div>

El primero centrará alineará todo dentro del div. El otro centrará alinear solo el botón.

et voila:

button {
  width: 100px; // whatever your button's width
  margin: 0 auto; // auto left/right margins
  display: block;
}

Actualización : si OP está buscando un centro horizontal y vertical, esta respuesta lo hará para un elemento de ancho / altura fijo.

Margen: 0 automático; es la respuesta correcta solo para el centrado horizontal. Para centrar en ambos sentidos, algo como esto funcionará, usando jquery:

var cenBtn = function() {
   var W = $(window).width();
   var H = $(window).height();
   var BtnW = insert button width;
   var BtnH = insert button height;
   var LeftOff = (W / 2) - (BtnW / 2);
   var TopOff = (H / 2) - (BtnH /2);
       $("#buttonID").css({left: LeftOff, top: TopOff});
};

$(window).bind("load, resize", cenBtn);

Actualización ... cinco años después , uno podría usar flexbox en el elemento DIV principal para centrar fácilmente el botón tanto horizontal como verticalmente.

Incluidos todos los prefijos del navegador, para un mejor soporte

div {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-align : center;
  -moz-box-align    : center;
  -ms-flex-align    : center;
  -webkit-align-items : center;
  align-items : center ;
  justify-content : center;
  -webkit-justify-content : center;
  -webkit-box-pack : center;
  -moz-box-pack : center;
  -ms-flex-pack : center;
}

#container {
  position: relative;
  margin: 20px;
  background: red;
  height: 300px;
  width: 400px;
}

#container div {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-box-align: center;
  -moz-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
  justify-content: center;
  -webkit-box-pack: center;
  -moz-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
}

<!-- using a container to make the 100% width and height mean something -->
<div id="container"> 
  <div style="width:100%; height:100%">
    <button type="button">hello</button>
  </div>
</div>

Con los detalles limitados proporcionados, asumiré la situación más simple y le diré que puede usar text-align: center:

http://jsfiddle.net/pMxty/

Usando flexbox

.Center {
  display: flex;
  align-items: center;
  justify-content: center;
}

Y luego agregando la clase a su botón.

<button class="Center">Demo</button> 

Deberías tomarlo simple aquí:

Primero tiene la posición inicial de su texto o botón:

<div style="background-color:green; height:200px; width:400px; margin:0 0 0 35%;">
   <h2> Simple Text </h2>
      <div>
           <button> Simple Button </button>
      </div>
</div>

Al agregar esta línea de código CSS a la etiqueta h2 o a la etiqueta div que contiene la etiqueta del botón

estilo: "text-align: center;"

Finalmente, el código de resultado será:

<div style="background-color:green; height:200px; width:400px; margin:0 0 0 35%;">
<h2 style="text-align:center;"> Simple Text </h2> <!-- <<--- here the changes -->

      <div style="text-align:center">        <!-- <<--- here the changes -->
                <button> Simple Button </button>
      </div>
</div>

Encontré esto y pensé que también dejaría la solución que utilicé, que utiliza line-heighty text-align: centerpara centrar tanto vertical como horizontalmente:

Haga clic aquí para trabajar JSFiddle

Para centrar <button type = "button">tanto vertical como horizontalmente dentro de <div>qué ancho se calcula dinámicamente como en su caso, esto es lo que debe hacer:

1. Establezca text-align: center;el ajuste <div>: esto centrará el botón cada vez que cambie el tamaño de <div>la ventana (o más bien la ventana)

2. Para la alineación vertical, deberá configurar margin: valuepx;el botón. Esta es la regla sobre cómo calcular valuepx:

   valuepx = (wrappingDIVheight - buttonHeight)/2

Aquí hay una demostración de JS Bin .

La respuesta súper simple que se aplicará a la mayoría de los casos es simplemente establecer el margen 0 autoy establecer la pantalla en block. Puedes ver cómo centré mi botón en mi demo en CodePen

Lo más fácil es ingresarlo como un "div", darle un "margen: 0 automático", pero si desea que esté centrado, debe darle un ancho

  Div{
   Margin: 0 auto ;
   Width: 100px ;
  }

Opción de respuesta CSS para centrar un botón vertical y horizontalmente sin preocuparse por el tamaño del elemento primario (usando ganchos de atributos de datos para cuestiones de claridad y separación) :

HTML

<div data-element="card">
  <div data-container="button"><button>CTA...</button></div>
</div>

CSS

[data-container="button"] {
  position: absolute;
  top: 50%;
  text-align: center;
  width: 100%;
}

Violín: https://jsfiddle.net/crrollyson/zebo1z8f/

Manera receptiva de centrar su botón en un div:

<div 
    style="display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 2rem;">
    <button type="button" style="height: 10%; width: 20%;">hello</button>
</div>

Supongamos que div es #div y el botón es #button:

#div {
    display: table-cell;
    width: 100%;
    height: 100%;
    text-align: center;
    vertical-align: center;
}

#button {}

Luego anide el botón en div como de costumbre.