Comment puis-je centrer un bouton horizontalement et verticalement dans une division à l'aide de CSS ?

Centrer un bouton au sein d'un Div

En CSS, il existe plusieurs techniques pour centrer le contenu au sein d'un élément parent. Explorons les approches les plus courantes pour centrer un bouton horizontalement dans un div.

Utilisation de Flexbox (approche moderne)

Flexbox est un module de mise en page CSS qui fournit des informations flexibles et réactives. mises en page. Pour centrer un bouton verticalement et horizontalement à l'aide de Flexbox :

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

Utilisation d'une largeur et d'une marge fixes (approche héritée)

Si le bouton a une largeur fixe et que le parent la largeur du div est fixe ou 100 %, vous pouvez utiliser les marges pour centrer it :

button {
  margin: 0 auto;
}

Méthodes alternatives pour le centrage horizontal

• Text-align : Définir la propriété text-align du parent div au "centre".
• marge-gauche : Calculer la moitié de la largeur du bouton et définissez-le comme marge négative pour le côté gauche.

Centrage vertical

Pour centrer le bouton verticalement, utilisez le positionnement relatif et définissez la propriété supérieure à 50%. Ensuite, définissez position : relative sur le bouton lui-même :

button {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}

Exemple de code

Voici un exemple de code HTML et CSS pour centrer un bouton dans un div :

<div>
<pre class="brush:php;toolbar:false">#wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
}

Cela centrera le bouton "Bonjour" horizontalement et verticalement au sein du parent div.