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

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 :

  1. On place l'élément en relatif pour le repositionner par rapport à son élément parent avec position: relative;.

  2. 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.

  3. 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 :

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%);
}

Centrer une Popup

Cliquez sur ce lien pour ouvrir une popup

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

HTML

<a class="example-link" href="javascript:;">Cliquez sur ce lien pour ouvrir une popup</a>
<div class="example-2">
    <figure>
        <img src="http://fc07.deviantart.net/fs71/i/2013/265/1/9/devon_jade__dubstep_themed_edit__2_by_matthewjendrasiak-d6ngt26.jpg" alt="Devon Jade Dubstep Themed Edit 2 by Matthew Jendrasiak">
        <figcaption>Cliquez n'importe où pour fermer</figcaption>
    </figure>
</div>

CSS

.example-2 {
    /* Par défaut notre popup est fermée */
    display: none;
    /* Zone de popup prenant toute la place */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.example-2.opened {
    /* Avec la classe opened, la popup est visible */
    display: block;
}
.example-2:before {
    /* Rendre visible le background */
    content: "";
    position: absolute;
    z-index: 1;
    background-color: rgba(0, 0, 0, 0.8);
    width: 100%;
    height: 100%;
}
.example-2 figure {
    /* Mise en forme du contenu */
    background-color: #FFF;
    margin: 0;
    /* Le contenu prend de base toute la largeur */
    width: 100%;
    /* Popup par dessus le background */
    z-index: 2;
    /* Centrage vertical automatique pour le contenu */
    position: absolute;
    top: 50%;
    -webkit-transform: translateY(-50%);
       -moz-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
         -o-transform: translateY(-50%);
            transform: translateY(-50%);
}
@media (min-width: 768px) {
    .example-2 figure {
        /* Taille fixe pour la popup à partir de 768px... */
        width: 764px;
        /* ...et centrage vertical et horizontal automatique pour le contenu */
        top: 50%;
        left: 50%;
        -webkit-transform: translateX(-50%) translateY(-50%);
           -moz-transform: translateX(-50%) translateY(-50%);
            -ms-transform: translateX(-50%) translateY(-50%);
             -o-transform: translateX(-50%) translateY(-50%);
                transform: translateX(-50%) translateY(-50%);
    }
}
.example-2 figcaption {
    /* Mise en forme figcaption */
    text-align: center;
    padding: 16px;
}
.example-2 img {
    /* Image responsive */
    max-width: 100%;
}

JS

// Ouverture et fermeture de popup.
$(".example-link, .example-2").click(function () {
    $(".example-2").toggleClass("opened");
});

Note : $ est une instance de la librairie jQuery.