Como centralizar um botão dentro de uma div?

Eu tenho uma div que é largura é 100%.

Gostaria de centralizar um botão dentro dele, como posso fazer isso?

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

Resposta atualizada

Atualizando porque notei que é uma resposta ativa, no entanto, o Flexbox seria a abordagem correta agora.

Demonstração ao vivo

Alinhamento vertical e horizontal.

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

Apenas horizontal (contanto que o eixo flexível principal seja horizontal, o padrão)

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

Resposta original usando uma largura fixa e sem flexbox

Se o pôster original desejar alinhamento vertical e central, é bastante fácil para largura e altura fixas do botão, tente o seguinte

Demonstração ao vivo

CSS

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

apenas para alinhamento horizontal, use

button{
    margin: 0 auto;
}

ou

div{
    text-align:center;
}

Você poderia apenas fazer:

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

Ou você pode fazer assim:

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

O primeiro irá alinhar tudo dentro da div. O outro centralizará o alinhamento apenas o botão.

et voila:

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

Atualização : se o OP estiver procurando pelo centro horizontal e vertical, esta resposta o fará para um elemento fixo de largura / altura.

Margem: 0 automático; é a resposta correta apenas para centralização horizontal. Para centralizar as duas maneiras, algo como isso 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);

Atualizar ... cinco anos depois , era possível usar o flexbox no elemento DIV pai para centralizar facilmente o botão na horizontal e na vertical.

Incluindo todos os prefixos do navegador, para melhor suporte

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>

Com os detalhes limitados fornecidos, assumirei a situação mais simples e direi que você pode usar text-align: center:

http://jsfiddle.net/pMxty/

Usando flexbox

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

E então adicionando a classe ao seu botão.

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

Aqui você deve simplificar:

primeiro você tem a posição inicial do seu texto ou botão:

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

Adicionando essa linha de código css à tag h2 ou à tag div que contém a tag button

estilo: "alinhamento de texto: centro;"

Finalmente, o código do 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>

Me deparei com isso e pensei em deixar a solução que usei também, que utiliza line-heighte text-align: centerfaz a centralização vertical e horizontal:

Clique aqui para trabalhar com o JSFiddle

Para centralizar uma <button type = "button">vertical e horizontalmente dentro de uma <div>largura que seja computada dinamicamente como no seu caso, é isso que fazer:

1. Defina text-align: center;para o empacotamento <div>: isso centralizará o botão sempre que você redimensionar a <div>(ou melhor, a janela)

2. Para o alinhamento vertical, você precisará definir margin: valuepx;o botão. Esta é a regra sobre como calcular valuepx:

   valuepx = (wrappingDIVheight - buttonHeight)/2

Aqui está uma demonstração do JS Bin .

A resposta super simples que se aplicará à maioria dos casos é definir a margem 0 autoe a exibição como block. Você pode ver como eu centralizei meu botão na minha demo no CodePen

O mais fácil é inseri-lo como um "div", dar-lhe uma "margem: 0 auto", mas se você quiser que ele seja centralizado, você precisa dar uma largura

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

Opção CSS responsiva para centralizar um botão na vertical e na horizontal sem se preocupar com o tamanho do elemento pai (usando ganchos de atributo de dados para esclarecer questões de separação e separação) :

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/

Maneira responsiva de centralizar seu botão em uma 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>

Supondo que div seja #div e button seja #button:

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

#button {}

Em seguida, aninhe o botão em div, como de costume.