Le centrage vertical en CSS est certainement l'une des plus grandes frustrations du quotidien d'un intégrateur. Ce fonctionnement n'est en effet pas réalisable de manière simple (au contraire du centrage horizontal, par exemple) et, si il existe des astuces ou des moyens détournés pour le reproduire, ils ne sont jamais pleinement satisfaisants.
On aurait pu penser que les récentes avancées du langage CSS apporteraient une solution à cela, mais en 2014, il semblerait que ce ne soit toujours pas d'actualité.
En théorie, vous savez déjà tout ça.
De même, vous devez connaitre plus d'une technique pour centrer verticalement du texte ou un élément.
Cependant, la plupart de ces techniques fonctionnent uniquement dans des cas particuliers : lorsque l'élément parent ou l'élément cible ont des dimensions connues et fixes.
À l'heure du responsive design, ce n'est plus suffisant.
Centrer l'inconnu
Heureusement pour nous, il existe aussi des techniques pour centrer verticalement lorsque les dimensions ne sont pas connues à l'avance ou sont amenées à changer. Elles sont moins nombreuses (j'en compte 3) mais relativement efficaces :
- En utilisant
display:tableetdisplay:table-cell, - En utilisant
position:relativeettransform:translateY()(visible ici), - En utilisant un élément « fantôme ».
Malheureusement pour moi, j'ai été confronté à un cas où les 2 premières solutions ne fonctionnaient pas :
La technique avec display:table et display:table-cell m'obligeait à ajouter des balises supplémentaires (ce qui n'est pas insurmontable, mais pas optimal) et la deuxième (avec position:relative et transform:translateY()) ne fonctionne pas sur WebKit lorsqu'elle est appliquée dans un élément parent en position absolue (bon à savoir).
J'ai donc décidé de faire une recherche sur Google pour voir si les usages avaient évolué et c'est là que j'ai pris connaissance de la 3ème technique au détour d'un article de CSS Tricks.
L'article date de 2011 (!), c'est donc une très vieille technique et pourtant je ne l'avais jamais croisée auparavant, ce qui est bien dommage car elle me parait être la meilleure.
Au niveau du support, on est au même niveau que la technique avec display:table (IE8+) et donc bien mieux que celle avec transform:translateY() (IE9+).
Au niveau markup, c'est une des plus légères car elle utilise un pseudo-élément et il est facile d'en faire un objet CSS pour pouvoir la réutiiser facilement.
Et pour finir, elle est utilisable dans le cas mentionné plus haut.
Voilà comment je compte l'utiliser à l'avenir :
/**
* .v-align-wrap>.v-align
*/
.v-align-wrap {
letter-spacing: -0.31em;
}
.v-align-wrap:before {
content: "";
display: inline-block;
height: 100%;
vertical-align: middle;
}
.v-align {
display: inline-block;
vertical-align: middle;
letter-spacing: normal;
}
