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

Le plus simple est de le saisir comme un "div" et de lui donner une "margin:0 auto", mais si vous voulez qu'il soit centré, vous devez lui donner une largeur.

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

Answer 2

Option Responsive CSS permettant de centrer un bouton verticalement et horizontalement sans se préoccuper 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/

Answer 3

Une façon réactive de centrer votre bouton dans 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>

Answer 4

La réponse super simple qui s'appliquera à la plupart des cas est de faire en sorte que la marge soit fixée à 0 auto et régler l'affichage sur block . Vous pouvez voir comment j'ai centré mon bouton dans ma démo sur CodePen

Answer 5

div {
    text-align : center;
}
button {
    width: 50%;
    margin: 1rem auto;
}

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

C'est ce que je fais le plus souvent.
Je pense que bootstrap utilise également ceci dans "mx-auto".