Centrage vertical en CSS sur un bloc à hauteur variable

Vous avez déjà eu besoin de centrer du texte verticalement dans un bloc dont la hauteur varie ?
Voici une solution qui devrait vous convenir.

TL;DR : Voici le JSFiddle de l’exemple de cet article.

Voici les éléments avec lesquels on va travailler :

  • un bloc à hauteur variable : .bloc-hauteur-variable
  • un bloc à centrer verticalement : .bloc-a-centrer
  • un bloc wrapper autour du bloc à centrer verticalement : .bloc-wrapper

Ce qui nous donne en HTML :

Mon texte sur une deux, plusieurs lignes, une image, un tableau, que sais-je.

Pour commencer, .bloc-hauteur-variable doit être en position relative, ensuite, on met en place une partie de l’astuce d’Alsacréations sur le centrage vertical :

Subtilité : assurez-vous que la hauteur de .bloc-wrapper soit plus grande que le contenu que vous souhaitez centrer. (Ici, j’ai pris 400px)

.bloc-hauteur-variable {
    position: relative;
}

.bloc-wrapper {
    height: 400px;
    line-height: 400px;
}

.bloc-a-centrer {
    line-height:1.2;
    display: inline-block;
    vertical-align: middle;
    /* Coucou IE */
    *display: inline;
    *zoom: 1;
}

Enfin, on met en place un alignement vertical en positionnant .bloc-wrapper à 50% du haut de son parent. On rajoute une marge négative égale à la moitié de la hauteur (permise par le positionnement) afin de parfaitement centrer le tout.

.bloc-hauteur-variable {
    /* Hauteur Arbitraire */
    height:632px;
    outline: 1px solid #ccc;
    position: relative;
}

.bloc-wrapper {
    position:absolute;
    top:50%;
    /* margin-top = -(height/2) */
    margin-top:-200px;
    height: 400px;
    line-height: 400px;
}

.bloc-a-centrer {
    line-height:1.2;
    display: inline-block;
    vertical-align: middle;
    /* Coucou IE */
    *display: inline;
    *zoom: 1;
}

En conclusion

Cette technique tient un peu du bazooka, car elle combine deux techniques d’alignement vertical : On centre verticalement un bloc dont on connait la hauteur moyenne, dans lequel on centre un bloc dont la hauteur est inconnue.

Cela fonctionne sur la majorité des navigateurs, dont IE8 & 9 (Le contenu ne sera pas centré sur IE 7). Les cas d’utilisation sont peu communs, mais on peut citer par exemple un site « full-screen », ou un menu centré dans une sidebar fixe.

Partager cet article

Laisser un commentaire

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

  • Bonjour,
    Sur une vm avec IE 7 natif, le bloc-a-centrer est en haut du bloc-wrapper, idem sur IE9 en mode compatibilité

    Bonne continuation
    P.

  • Bien vu, je mets à jour les informations de compatibilité. merci !
    (Je jette un oeil pour trouver une solution convenable sur IE7)

  • Bonjour,
    Avec un site centré verticalement sur cette base, comment faire pour que le header ne disparaisse pas en hauteur au resize de la page, ou même, n’apparaisse pas du tout sur un écran de smartphone en mode portrait (le viewport n’affichant dans sa hauteur que le tiers central de la page) ?
    merci pour toute astuce ou suggestion…

  • Une media-query adaptée, si la taille de la fenêtre est inférieure à la taille de votre site, désactiver le positionnement absolu du wrapper.