Comment centrer un bouton dans une div?

J'ai un div dont la largeur est de 100%.

J'aimerais centrer un bouton à l'intérieur, comment pourrais-je faire cela?

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

Réponse mise à jour

Mise à jour parce que j'ai remarqué que c'est une réponse active, mais Flexbox serait la bonne approche maintenant.

Démo en direct

Alignement vertical et horizontal.

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

Juste horizontal (tant que l'axe principal de flexion est horizontal, ce qui est par défaut)

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

Réponse originale utilisant une largeur fixe et sans flexbox

Si l'affiche originale souhaite un alignement vertical et central assez facile pour une largeur et une hauteur fixes du bouton, essayez ce qui suit

Démo en direct

CSS

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

pour un alignement juste horizontal, utilisez

button{
    margin: 0 auto;
}

ou

div{
    text-align:center;
}

Vous pouvez simplement faire:

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

Ou vous pouvez le faire comme ceci à la place:

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

Le premier alignera tout au centre du div. L'autre alignera au centre juste le bouton.

et voilà:

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

Mise à jour : Si OP recherche un centre horizontal et vertical, cette réponse le fera pour un élément largeur / hauteur fixe.

Marge: 0 auto; est la bonne réponse pour le centrage horizontal uniquement. Pour centrer dans les deux sens, quelque chose comme ça fonctionnera, en utilisant 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);

Mise à jour ... cinq ans plus tard , on pourrait utiliser flexbox sur l'élément DIV parent pour centrer facilement le bouton horizontalement et verticalement.

Y compris tous les préfixes de navigateur, pour une meilleure prise en charge

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>

Avec les détails limités fournis, je vais supposer la situation la plus simple et dire que vous pouvez utiliser text-align: center:

http://jsfiddle.net/pMxty/

Utilisation de flexbox

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

Et puis en ajoutant la classe à votre bouton.

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

Vous devriez le prendre simple ici vous allez:

vous avez d'abord la position initiale de votre texte ou bouton:

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

En ajoutant cette ligne de code CSS à la balise h2 ou à la balise div qui contient la balise button

style: "text-align: center;"

Finalement, le code de résultat sera:

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

Je suis tombé sur cela et j'ai pensé que je laisserais également la solution que j'utilisais, qui utilise line-heightet text-align: centerfait le centrage vertical et horizontal:

Cliquez ici pour travailler JSFiddle

Pour centrer à la <button type = "button">fois verticalement et horizontalement une <div>largeur calculée dynamiquement comme dans votre cas, voici ce qu'il faut faire:

1. Réglez text-align: center;sur l'habillage <div>: cela centrera le bouton chaque fois que vous redimensionnerez la <div>(ou plutôt la fenêtre)

2. Pour l'alignement vertical, vous devrez définir margin: valuepx;le bouton. Ceci est la règle sur la façon de calculer valuepx:

   valuepx = (wrappingDIVheight - buttonHeight)/2

Voici une démo JS Bin .

La réponse super simple qui s'appliquera à la plupart des cas est de simplement définir la marge sur 0 autoet de régler l'affichage sur block. Vous pouvez voir comment j'ai centré mon bouton dans ma démo sur CodePen

La chose la plus simple est de la saisir comme un "div" donnez-lui une "marge: 0 auto" mais si vous voulez qu'elle soit centrée, vous devez lui donner une largeur

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

Option CSS réactive pour centrer un bouton verticalement et horizontalement sans se soucier de la taille de l'élément parent (en utilisant des crochets d'attributs de données pour des raisons de clarté et de séparation) :

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

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

Manière réactive de centrer votre bouton dans une 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>

Supposons que div est #div et que le bouton est #button:

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

#button {}

Ensuite, imbriquez le bouton dans div comme d'habitude.