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.