Centrer une Div horizontalement en CSS

1. Utilisez la propriété margin pour centrer un div horizontalement en CSS
2. Utiliser Flexbox pour centrer un div horizontalement en CSS
3. Définissez le div sur inline-block et utilisez la propriété text-align pour le centrer horizontalement en CSS

L’article discutera de quelques façons de centrer horizontalement un div en CSS.

Utilisez la propriété margin pour centrer un div horizontalement en CSS

En utilisant la propriété margin, on peut centrer un div horizontalement en CSS.

La propriété margin est un raccourci pour définir les marges des quatre directions à partir d’un élément. Nous pouvons utiliser la propriété pour attribuer les marges aux éléments top, right, bottom et left dans l’ordre.

On peut utiliser l’option auto pour les marges gauche et droite pour centrer horizontalement un div. Les marges supérieure et inférieure peuvent être réglées sur 0.

L’option auto placera l’élément au centre et divisera également les marges gauche et droite. Nous devons spécifier une largeur à l’élément à centrer.

L’élément occupera la largeur donnée et l’espace horizontal restant sera divisé également à gauche et à droite.

Prenons un exemple. Si la largeur d’un élément est de 50%, la propriété auto créera une marge gauche de 25% et une marge droite de 25%.

Nous pouvons également utiliser la propriété display pour définir l’élément sur table. Il n’est pas nécessaire de spécifier la largeur dans un tel cas s’il y a du contenu dans le tableau.

La largeur du contenu est utilisée. Lorsque nous n’écrivons aucun contenu dans le div intérieur, nous spécifions une certaine largeur.

Par exemple, créez un div avec le nom de classe outerDiv en HTML. Ensuite, imbriquez un autre innerDiv dans le outerDiv en HTML.

En CSS, définissez width sur 100% et background sur blue dans la classe outerDiv. Ensuite, sélectionnez innerDiv et définissez la propriété display sur table.

Définissez son background sur red, sa height et sa width sur 10vh et 10vw. Enfin, réglez la margin sur 0 auto.

Ici, le 0 dans la propriété margin est la marge pour le haut et le bas. L’option auto est pour la marge à gauche et à droite. On peut centrer un div horizontalement en utilisant la propriété margin de CSS.

Exemple de code :

<div class="outerDiv">
    <div class="innerDiv"></div>
</div>

.innerDiv {
    display: table;
    background:red;
    height:10vh;
    width:10vw;
    margin: 0 auto;
}
.outerDiv {
    width:100%;
    background:blue;
}

Utiliser Flexbox pour centrer un div horizontalement en CSS

On peut utiliser les propriétés flexbox pour centrer un div horizontalement en CSS.

Flexbox offre un moyen simple de centrer un élément verticalement et horizontalement. Nous pouvons créer flex et définir comment les éléments sont positionnés dans la flexbox.

La propriété justify-content peut être utilisée pour spécifier la position horizontale du contenu à l’intérieur de la flexbox lorsque le contenu ne prend pas tout l’espace disponible. Nous pouvons créer une boîte flexible dans le conteneur externe et définir la position du conteneur interne au centre à l’aide de la propriété justify-content.

Par exemple, sélectionnez la classe innerDiv et définissez les propriétés height et width sur 10vh et 10vw. Définissez la couleur black comme couleur d’arrière-plan. Ensuite, sélectionnez la classe outerDiv et donnez la width à 100%.

Réglez sa couleur de fond sur 100%. Ensuite, créez le conteneur une flexbox en définissant la propriété display sur flex. Après cela, écrivez l’option center à la propriété justify-content.

On peut donc utiliser la CSS Flexbox pour centrer un div horizontalement en CSS.

Exemple de code :

.innerDiv {
    background:black;
    height:10vh;
    width:10vw;
}
.outerDiv {
    width:100%;
    background:pink;
    display: flex;
    justify-content: center;
}

<div class="outerDiv">
    <div class="innerDiv"></div>
</div>

Définissez le div sur inline-block et utilisez la propriété text-align pour le centrer horizontalement en CSS

Une autre méthode pour centrer un div horizontalement dans CSS consiste à définir le div comme un élément inline-block. Tout comme inline, un élément inline-block ne commence pas dans la nouvelle ligne.

Cependant, nous pouvons définir les paramètres width et height. Ensuite, nous pouvons utiliser la propriété text-align dans le div extérieur pour centrer le div intérieur horizontalement.

Le div intérieur hérite de la propriété text-align du div extérieur, et l’élément peut être centré.

Par exemple, définissez une hauteur, une largeur et un arrière-plan sur la div intérieure comme les méthodes ci-dessus. Ensuite, utilisez la propriété display pour définir l’élément sur inline-block.

Dans le div extérieur, définissez sa largeur et son arrière-plan. Enfin, définissez la propriété text-align sur center.

De cette façon, on peut centrer un div horizontalement en CSS.

Exemple de code :

.innerDiv {
    background:red;
    height:10vh;
    width:10vw;
    display:inline-block;
}

.outerDiv {
    width:100%;
    background:blue;
    text-align:center;
}

<div class="outerDiv">
    <div class="innerDiv"></div>
</div>