centrant un bouton dans un div

dans le développement Web, il est souvent souhaitable de centrer un bouton dans un div contenant. Explorons deux solutions à ce défi:

à l'aide de flexbox

flexbox fournit une solution élégante pour aligner des éléments le long des deux axes. Pour centrer un bouton horizontalement et verticalement dans une div:

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

Si seul le centrage horizontal est souhaité, la propriété de justification peut être utilisée:

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

Approche basée sur la marge

Sans Flexbox, un bouton peut être centré à l'aide de marges:

button {
  margin: -20px -50px; /* Offset to center */
  position: relative;
  top: 50%;
  left: 50%;
}

pour le centrage horizontal uniquement, l'une de ces deux approches peut être utilisée:

• margin: 0 auto; sur le bouton
• text-adign: Center; sur le div contenant