Centrer une div verticalement à l'aide de CSS

1. Utilisez les propriétés top et transform dans le div intérieur pour centrer verticalement le div à l’aide de CSS
2. Utilisez la CSS Flexbox pour centrer verticalement le div dans CSS

Cet article présentera des méthodes pour centrer un div en CSS verticalement.

Utilisez les propriétés top et transform dans le div intérieur pour centrer verticalement le div à l’aide de CSS

Cette méthode utilise deux conteneurs pour montrer comment centrer un div verticalement.

Tout d’abord, nous pouvons créer un div extérieur et intérieur où nous centrerons le div intérieur verticalement par rapport au div extérieur. Nous pouvons utiliser les propriétés CSS transform et top pour centrer le div intérieur verticalement.

La propriété top définit uniquement la position verticale des éléments positionnés. La propriété présente un comportement différent selon la propriété de position appliquée aux éléments.

Par exemple, si position est défini sur relative, le bord supérieur de l’élément se déplacera vers le bas ou vers le haut par rapport à sa position normale. La propriété transform prend une variété de valeurs et translateY() est celle que nous utiliserons.

La fonction translateY() traduira l’élément uniquement à partir de l’axe Y. On peut centrer verticalement un div en utilisant ces deux propriétés.

Par exemple, créez un élément div et enveloppez-le avec un autre élément div en HTML. En CSS, sélectionnez le div extérieur et définissez la height, la largeur et la background-color sur 180px, 300px et blue.

Ensuite, sélectionnez le div interne et définissez la propriété position sur relative. Ensuite, appliquez red comme propriété background-color et donnez une hauteur 20px au div et utilisez translateY(-50%) comme valeur de la propriété transform.

Dans l’exemple ci-dessous, la valeur 50% de la propriété top placera le bord supérieur du div intérieur à la section médiane verticale du div extérieur. Cependant, le div intérieur n’est pas centré car il a la width de 20px.

La valeur translateY(-50%) déplacera le bord supérieur de 50 % de sa hauteur vers le haut. Il se déplacera vers le haut à cause de la valeur négative, ce qui signifie que le div se déplacera de 10px vers le haut. De cette façon, le div intérieur est centré verticalement.

Exemple de code :

<div class='outer-div'>
 <div class='inner-div'>
 
 </div>
</div>

div.outer-div {
 height: 180px;
 width: 300px;
 background-color: blue;
}

div.inner-div {
 position: relative;
 background-color:red;
 height:20px;
 top: 50%;
 transform: translateY(-50%);
}

Utilisez la CSS Flexbox pour centrer verticalement le div dans CSS

Nous pouvons créer un conteneur flexible et utiliser les propriétés justify-content et align-items pour centrer verticalement le div en CSS. Nous pouvons utiliser la propriété display pour définir le conteneur comme une flexbox.

La propriété justify-content alignera horizontalement les éléments dans la flexbox. Il prend diverses options comme flex-start, flex-end, center, etc.

De même, la propriété align-items positionnera verticalement les éléments à l’intérieur de la flexbox.

Par exemple, créez un div avec la classe box et créez un autre div à l’intérieur. Écrivez du texte à l’intérieur du div intérieur.

Sélectionnez les balises body et html en CSS et réglez la hauteur sur 100%. Ensuite, sélectionnez la classe box et définissez sa height sur 100%.

Définissez background sur red et la propriété display sur flex. Enfin, définissez la valeur center sur les propriétés justify-content et align-items.

L’exemple ci-dessous centrera verticalement et horizontalement le texte à l’intérieur du div. Nous ne pouvons utiliser ces deux propriétés qu’à l’intérieur d’un conteneur souple.

Ainsi, nous pouvons centrer un div en utilisant flexbox.

Exemple de code :

<div class="box">
 <div>The Div</div>
</div>

html,body {
 height: 100%;
}

.box {
 height: 100%;
 background: red;
 display: flex;
 justify-content: center;
 align-items: center;
}