Comment centrer horizontalement une div dans une autre div

La balise <div> est utilisée pour définir des parties d'une page ou d'un document HTML. Il regroupe de grandes sections d'éléments HTML et permet leur mise en forme avec du CSS.

Si vous souhaitez placer un élément <div> au centre d'un autre <div>, vous devez utiliser des propriétés CSS pour le positionner exactement au centre d'un autre <div> horizontalement.

HTML

Créez deux éléments <div> avec des attributs id nommés "outer-div" et "inner-div". Placez le deuxième <div> dans le premier.

<div id="outer-div">
  <div id="inner-div">I am a horizontally centered div.</div>
</div>

CSS

Définissez la largeur de l'élément <div> extérieur (100 % dans notre cas). Modifiez cette largeur selon vos besoins.
Définissez la propriété margin sur "auto" pour centrer horizontalement l'élément <div> dans la page. La propriété margin: 0 auto effectue le centrage réel.
Définissez vos couleurs préférées pour les éléments <div> externe et interne à l'aide de la propriété background-color.
Utilisez la valeur "inline-block" de la propriété display pour afficher le <div> interne en tant qu'élément en ligne ainsi qu'en tant que bloc.
Définissez la propriété text-align: center; sur l'élément externe <div> pour centrer l'élément interne. Cette propriété ne fonctionne que sur les éléments en ligne.

#outer-div {
  width: 100%;
  text-align: center;
  background-color: #0666a3
}

#inner-div {
  display: inline-block;
  margin: 0 auto;
  padding: 3px;
  background-color: #8ebf42
}

Voici le code complet.

Exemple de centrage horizontal d'un élément <div> dans un autre avec la propriété text-align :

<!DOCTYPE html>
<html>
  <head>
    <style>
      #outer-div {
        width: 100%;
        text-align: center;
        background-color: #0E1B93
      }
      #inner-div {
        display: inline-block;
        margin: 0 auto;
        padding: 3px;
        background-color: #FFC426
      }
    </style>
  </head>
  <body>
    <div id="outer-div">
      <div id="inner-div">Je suis une div centrée horizontalement.</div>
    </div>
  </body>
</html>

L'exécution de ce bout de code affiche le résultat suivant dans un navigateur :

Exemple de centrage horizontal d'un élément <div> dans un autre avec la propriété display :

<!DOCTYPE html>
<html>
  <head>
    <style>
      #main-container {
        display: flex;
        width: 100%;
        justify-content: center;
        background-color: #0E1B93;
      }
      #main-container div {
        background-color: #FFC426;
        padding: 10px;
      }
    </style>
  </head>
  <body>
    <div id="main-container">
      <div> I am a horizontally centered div with the CSS display property.</div>
    </div>
  </body>
</html>

L'exécution de ce bout de code affiche le résultat suivant dans un navigateur :

Comment centrer horizontalement une <div> dans une autre <div> ?

Par : TutorialsGrey, le 03 Février 2022

HTML

CSS

Exemple de centrage horizontal d'un élément <div> dans un autre avec la propriété text-align :

Exemple de centrage horizontal d'un élément <div> dans un autre avec la propriété display :

Article Précédent

Comment aligner horizontalement deux divs en HTML ?

Article Suivant

Comment centrer horizontalement un Div avec CSS ?

Questions récentes

Catégories