Comment Centrer un Div Horizontalement Avec CSS?

Parfois, vous devez centrer votre <div> horizontalement, mais vous ne savez pas comment le faire. Ce tutoriel va vous aider. Il est très facile, si vous suivez les pas décrits au dessous.

Voyons un exemple et essayons de discuter chaque partie du code.

1. Créez HTML

  • Placez les balises <h2> et <h3> et y écrivez certain contenu.
  • Créez une balise <div>. Écrivez quelque contenu dans cette balise.
<body>
  <h2>W3docs</h2>
  <h3>Div centré horizontalement</h3>
  <div> W3docs est un site web informatique pour les dévelopeurs web, avec de tutoriels et références lié au développement web.
  </div>
</body>

2. Ajoutez CSS

  • Définissez la largeur de div en utilisant la propriété width.
  • Utilisez la propriété margin qui crée un espace autour de l'élément. Définissez la valeur "auto" pour centrer le div.
  • Définissez la bordure pour le div en utilisant la propriété border et définissez les valeurs des propriétés border-width, border-style, et border-color.
  • Choisissez une couleur pour les balises <h2> et <h3>.
  • Utilisez la propriété text-align et la valeur "center" pour les balises <h2> et <h3> pour aligner le texte au centre.
div {
  width: 300px;
  margin: auto;
  border: 3px solid #4287f5;
}
h2,
h3 {
  text-align: center;
  color: #4287f5;
}

Voici le résultat de notre code.

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</title>
    <style>
      div {
        width: 300px;
        margin: auto;
        border: 3px solid #4287f5;
      }
      h2,
      h3 {
        text-align: center;
        color: #4287f5;
      }
    </style>
  </head>
  <body>
    <h2>W3docs</h2>
    <h3>Div centré horizontalement</h3>
    <div>W3docs est un site web informatique, avec tutoriels et références lié au développemnent Web.</div>
  </body>
</html>

Voici un autre exemple.

Exemple

<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</title>
    <style>
      div {
        background-color: #8ebf42;
        color: #ffffff;
        width: 300px;
        height: 300px;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        padding: 20px;
        line-height: 30px;
      }
      h2,
      h3 {
        text-align: center;
        color: #4287f5;
      }
    </style>
  </head>
  <body>
    <h2>W3docs</h2>
    <h3>Div centré horizontalement</h3>
    <main>
      <div>W3docs est un site web informatique, avec tutoriels et références lié au développemnent Web.</div>
    </main>
  </body>
</html>

Dans cet exemple, nous utilisons la propriété transform qui spécifie la transformation bidimensionnelle ou tridimensionnelle de l'élément.

Seuls les éléments positionnés de modèle de boîte peuvent être transformés. 
<!DOCTYPE html>
<html>
  <head>
    <title>Titre du document</title>
    <style>
      .purple-box {
        display: flex;
        align-items: center;
        justify-content: center;
      }
      .purple-square {
        background-color: #b10dc9;
        width: 300px;
        height: 300px;
      }
      h2,
      h3 {
        text-align: center;
        color: #4287f5;
      }
    </style>
  </head>
  <body>
    <h2>W3docs</h2>
    <h3>Div centré horizontalement</h3>
    <div class="purple-box">
      <div class="purple-square"></div>
    </div>
  </body>
</html>

De plus, on utilise les propriétés padding et line-height.

Voyons un autre exemple.

Exemple

Dans cet exemple, nous utilisons la propriété display avec ka valeur "flex" qui affiche un élément en tant qu'un conteneur au niveau du bloc. Nous avons aussi utilisée la propriété align-items avec la valeur "center" que signifie que les éléments sont placés au centre du conteneur. Nous avons utilisée la propriété justify-content avec la valeur "center" qui signifie que les éléments sont placés au centre du conteneur.