j'essaie d'aligner le bouton html au centre de ma page

Question

J'essaie d'aligner un bouton HTML exactement au centre de la page, quel que soit le navigateur utilisé. Soit il flotte vers la gauche tout en restant au centre vertical, soit il se trouve quelque part sur la page, par exemple en haut de la page, etc.

Je veux qu'il soit centré à la fois verticalement et horizontalement. Voici ce que j'ai écrit pour l'instant :

<button type="button" style="background-color:yellow;margin-left:auto;margin-right:auto;display:block;margin-top:22%;margin-bottom:0%">
   mybuttonname
</button>

Answer 1

Voici votre solution : JsFiddle

En gros, placez votre bouton dans un div avec du texte centré :

<div class="wrapper">
    <button class="button">Button</button>
</div>

Avec les styles suivants :

.wrapper {
    text-align: center;
}

.button {
    position: absolute;
    top: 50%;
}

Il y a plusieurs façons d'écorcher un chat, et celle-ci n'en est qu'une.

Answer 2

Vous pouvez centrer un button sans utiliser text-align sur le parent div en utilisant simplement margin:auto; display:block;

Par exemple :

HTML

<div>
  <button>Submit</button>
</div>

CSS

button {
  margin:auto;
  display:block;
}

LE VOIR EN ACTION : CodePen

Answer 3

Modifié par l'auteur : Cette réponse est vraiment obsolète ! Flexbox ou grid sont bien meilleurs.

---

J'ai vraiment pris récemment display: table pour donner aux choses une taille fixe, afin de pouvoir margin: 0 auto pour travailler. Ça m'a rendu la vie beaucoup plus facile. Il faut juste dépasser le fait que l'affichage "table" ne signifie pas table html.

Il est particulièrement utile pour la conception réactive, où les choses se compliquent et où il devient impossible de gérer les 50 % de gauche par ci et les 50 % de gauche par là.

style
{
   display: table;
   margin: 0 auto
}

JsFiddle

De plus, si vous avez deux boutons et que vous voulez qu'ils aient la même largeur, vous n'avez même pas besoin de connaître la taille de chacun d'eux pour qu'ils aient la même largeur, car le tableau les réduira comme par magie pour vous.

JsFiddle

(Cela fonctionne également s'ils sont en ligne et que vous souhaitez centrer deux boutons côte à côte - essayez de faire cela avec des pourcentages !)

Answer 4

Essayez ceci. C'est assez simple et si vous ne pouvez pas modifier votre fichier .css, cela devrait fonctionner.

<p align="center">
<button type="button" style="background-color:yellow;margin-left:auto;margin-right:auto;display:block;margin-top:22%;margin-bottom:0%"> mybuttonname</button>
</p>

Answer 5

Voici la solution demandée

<button type="button" style="background-color:yellow;margin:auto;display:block">mybuttonname</button>