Come centrare un pulsante all'interno di un div?

Ho un div che ha una larghezza del 100%.

Vorrei centrare un pulsante al suo interno, come potrei farlo?

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

Risposta aggiornata

Aggiornamento perché ho notato che è una risposta attiva, tuttavia Flexbox sarebbe l'approccio corretto ora.

Dimostrazione dal vivo

Allineamento verticale e orizzontale.

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

Solo orizzontale (purché l'asse flessibile principale sia orizzontale, che è l'impostazione predefinita)

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

Risposta originale usando una larghezza fissa e nessuna flexbox

Se il poster originale vuole che l'allineamento verticale e centrale sia abbastanza facile per la larghezza e l'altezza fisse del pulsante, provare quanto segue

Dimostrazione dal vivo

CSS

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

per un solo allineamento orizzontale usare entrambi

button{
    margin: 0 auto;
}

o

div{
    text-align:center;
}

Potresti semplicemente fare:

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

Oppure potresti farlo così:

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

Il primo allineerà al centro tutto all'interno del div. L'altro allinea al centro solo il pulsante.

et voilà:

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

Aggiornamento : Se OP cerca un centro orizzontale e verticale, questa risposta lo farà per un elemento larghezza / altezza fisso.

Margine: 0 auto; è la risposta corretta solo per la centratura orizzontale. Per centrare entrambi i modi in cui qualcosa di simile funzionerà, 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);

Aggiornamento ... cinque anni dopo , si potrebbe usare la flexbox sull'elemento DIV principale per centrare facilmente il pulsante sia in orizzontale che in verticale.

Compresi tutti i prefissi del browser, per il miglior supporto

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 i dettagli limitati forniti, assumerò la situazione più semplice e dirò che è possibile utilizzare text-align: center:

http://jsfiddle.net/pMxty/

Utilizzando Flexbox

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

E quindi aggiungendo la classe al tuo pulsante.

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

Dovresti prenderlo semplice qui:

per prima cosa hai la posizione iniziale del tuo testo o pulsante:

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

Aggiungendo questa riga di codice CSS al tag h2 o al tag div che contiene il tag button

style: "text-align: center;"

Finaly Il codice risultato sarà:

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

Mi sono imbattuto in questo e ho pensato di lasciare anche la soluzione che ho usato, che utilizza line-heighte text-align: centerper centrare sia verticale che orizzontale:

Fai clic qui per lavorare con JSFiddle

Per centrare <button type = "button">sia verticalmente che orizzontalmente all'interno di una <div>larghezza calcolata in modo dinamico come nel tuo caso, ecco cosa fare:

1. Imposta text-align: center;sul wrapping <div>: questo centrerà il pulsante ogni volta che ridimensionerai la <div>(o meglio la finestra)

2. Per l'allineamento verticale, dovrai impostare margin: valuepx;il pulsante. Questa è la regola su come calcolare valuepx:

   valuepx = (wrappingDIVheight - buttonHeight)/2

Ecco una demo di JS Bin .

La risposta semplicissima che si applica alla maggior parte dei casi è semplicemente impostare il margine su 0 autoe impostare il display su block. Puoi vedere come ho centrato il mio pulsante nella mia demo su CodePen

La cosa più semplice è inserirla come "div" dandogli un "margine: 0 auto" ma se vuoi che sia centrato devi dargli una larghezza

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

Opzione CSS reattiva per centrare un pulsante in verticale e in orizzontale senza preoccuparsi della dimensione dell'elemento principale (utilizzando i ganci dell'attributo dei dati per motivi di chiarezza e separazione) :

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%;
}

Fiddle: https://jsfiddle.net/crrollyson/zebo1z8f/

Modo reattivo per centrare il tuo pulsante in 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>

Supponendo che div sia #div e il pulsante sia #button:

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

#button {}

Quindi annidare il pulsante in div come al solito.