FotoliaComp_55161032_bLBdJcCf6uy09vkqmGn1VO7HnjLR05lS_NW40

CSS : Comment centrer verticalement ?

Centrer du contenu verticalement est une chose qu’on fait tous les jours.

Il existe beaucoup de solutions plus ou moins efficaces en fonction de la structure, l’exemple le plus courant est d’utiliser un display:table-cell avec un vertical-align: middle. Le soucis c’est que ça peut vite poser des problèmes d’affichages surtout si tout est déjà intégré.

Après avoir écumé les sites pour trouver des astuces pour réussir à centrer verticalement du contenu dans une div (ou tout autre conteneur) j’ai trouver la solution la plus simple à mes yeux, qui ne casse pas une intégration et qui se retient très facilement :

Le position:absolute va me permettre de bouger librement mon conteneur.

Le top:50% va placer le coin haut gauche de mon conteneur au centre à gauche de son parent

Le transform:translateY(-50%) va déplacer le conteneur vers le haut de la moitié de sa hauteur ce qui signifie que le milieu de mon conteneur sera placé au milieu du parent : il sera donc bien centré verticalement.

Exemple :

Edit du 20/06/2016 : une omission importante , le parent doit être en position relative et sa hauteur défini.

Auteur : Valentin

Valentin
Référenceur, j'aime les chevaux la guitare et Iron Man ! Slash est le meilleur, Iron Man gagne à coup sûr aucune discution possible !

Commentaires Facebook

4 Commentaires

    1. Je n’utilise que très peu flexbox (je vais m’y pencher sérieusement 🙂 ), c’est juste que la méthode du absolute marche dans de très nombreux cas, facile à retenir et peut se mettre en place sans “tout casser” du moins sans trop toucher à la structure 😉

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *