Centrer verticalement n'importe quel élément en quelques lignes CSS

Le 14 Octobre 2014 à 10h00

Une solution rapide et qui fonctionne sur tous les navigateurs à partir de IE9 est le centrage vertical avec la valeur CSS3 translateY de la propriété transform.

Pour mettre cela en place, trois simples propriétés :

On place l'élément en relatif pour le repositionner par rapport à son élément parent avec position: relative;.
On déplace l'élément de la moitié de la hauteur de l'élément parent avec top: 50%;, la référence de déplacement étant actuellement son bord haut.
On re-centre l'élément non plus à partir de son bord haut mais de son centre vertical avec transform: translateY(-50%);

Et voilà !

Exemple de code minimal

Voici ce que cela donne avec les préfixes propriétaires :

.vertical-align {
    position: relative;
    top: 50%;
    -webkit-transform: translateY(-50%);
       -moz-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
         -o-transform: translateY(-50%);
            transform: translateY(-50%);
}

Note : si votre élément est de type inline, il faudra ajouter la propriété display: inline-block; pour que la transformation soit valide dans tous les cas de figures sur tous les navigateurs supportant translateY :

.inline-block {
    display: inline-block
}

Note : si le centrage affiche l'élément sur un demi-pixel, celui-ci peut paraître flou. Pour empêcher cela, il suffit de munir un élément parent de transform-style: preserve-3d; :

.preserve-3d {
    -webkit-transform-style: preserve-3d;
       -moz-transform-style: preserve-3d;
            transform-style: preserve-3d;
}

Exemple concret d'utilisation

Texte en Hover sur image

Passez votre souris sur l'image :

Voir l'image en grand format

Note : Vous pouvez retailler la fenêtre pour voir le résultat en Responsive Web Design

HTML

<div class="example">
    <img src="http://fc08.deviantart.net/fs70/i/2012/309/9/1/the_moment_by_dzsurnik-d5k2le2.jpg" alt="The Moment by Dzsurnik">
    <a href="http://fc08.deviantart.net/fs70/i/2012/309/9/1/the_moment_by_dzsurnik-d5k2le2.jpg" target="_blank">
        <span>Voir l'image en grand format</span>
    </a>
</div>

CSS

.example {
    /* Permettre à `a` d'être bien placer en absolue */
    position: relative;
    /* Éviter les rendus flous */
    -webkit-transform-style: preserve-3d;
       -moz-transform-style: preserve-3d;
            transform-style: preserve-3d;
}
.example img {
    /* Rendre l'image Responsive */
    display: block;
    max-width: 100%;
    /* Centrer l'image */
    margin-left: auto;
    margin-right: auto;
}
.example a {
    /* Cacher le lien si la zone n'est pas survolée */
    display: none;
    /* Couvrir l'intégralité de `.example` */
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* Être transparent pour voir l'image */
    background-color: rgba(255, 255, 255, 0.8);
    /* Centrer horizontalement le texte */    
    text-align: center;
    /* Styler le texte */
    font-weight: bold;
    font-size: 1.6em;
    line-height: 1.3;
}
.example a:hover {
    /* Désactiver visuellement le comportement `:hover` sur le lien */
    color: #48739E;
    text-decoration: none;
}
.example:hover a {
    /* Afficher `a` au survole de `.example` */
    display: block;
}
.example span {
    /* Centrage vertical automatique pour le texte */
    position: relative;
    display: inline-block;
    top: 50%;
    -webkit-transform: translateY(-50%);
       -moz-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
         -o-transform: translateY(-50%);
            transform: translateY(-50%);
}

Cliquez sur ce lien pour ouvrir une popup

Devon Jade Dubstep Themed Edit 2 by Matthew Jendrasiak — Cliquez n'importe où pour fermer