Comment centrer un bouton dans un div ?

Question

J'ai une division dont la largeur est de 100 %.

J'aimerais y centrer un bouton, comment puis-je faire ?

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

Answer 1

Tu devrais le prendre simplement, voilà :

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 h2 ou à la balise div étiquette qui contient la balise du bouton

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>

Answer 2

Utilisation de Flexbox

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

Et ensuite ajouter la classe à votre bouton.

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

Answer 3

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

1. Set text-align: center; à l'emballage <div> ce qui permettra de centrer le bouton chaque fois que vous redimensionnerez l'écran. <div> (ou plutôt la fenêtre)

2. Pour l'alignement vertical, vous devez définir les paramètres suivants margin: valuepx; pour le bouton. Voici la règle à suivre pour calculer valuepx :

   valuepx = (wrappingDIVheight - buttonHeight)/2

Voici un Démonstration de JS Bin .

Answer 4

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

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

#button {}

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

Answer 5

Je suis tombé dessus et j'ai pensé laisser la solution que j'ai utilisée aussi, qui utilise line-height y text-align: center pour effectuer un centrage vertical et horizontal :

Cliquez ici pour le travail de JSFiddle