Code

Centrer un bloc verticalement en CSS

Aligner un div verticalement au milieu d’un autre div, ça a toujours été compliqué à faire ou compliqué à comprendre.

Voici une méthode permettant d’aligner verticalement un div dans un autre div.

Nous créons un Div possédant une classe .mondiv puis à l’intérieur nous allons intégrer un autre div possédant une classe qui va nous permettre d’ajuster son contenu à la hauteur du div parent .mondiv.



Centré verticalement

Le CSS doit rester simple, c’est la définition d’une position relative au parent .mondiv qui va permettre au div enfant .v-center d’eêtre en position absolue à l’intérieur du div parent. Nous définissons un top à 50%, qui va descendre le bloc d’une valeur égale à 50% la hauteur du bloc parent, puis un transform translateY de -50% qui va permettre de réhausser de 50% de la valeur de la hauteur du bloc enfant afin de l’aligner parfaitement sur l’axe vertical.

.mondiv {
position:relative;
}
.v-center {
position:absolute;
top:50%;
transform: translateY(-50%);
}

Si ça vous a aidé, n’hésitez pas à commenter, de même si vous avez une solution plus facile.

Theme by Anders Norén