Centrage vertical d’élément aux dimensions variables

Centrage vertical d’élément aux dimensions variables

Contrairement au centrage horizontal qui est facilement réalisable, le centrage vertical est l’une des plus grandes frustrations du quotidien d’un intégrateur, malgré le fait que des astuces existent, ils ne sont jamais totalement satisfaisants.

Même CSS3 ne peut pas encore nous proposer des solutions, heureusement qu’on a pris connaissance d’un article sur CSS Tricks.

La technique qu’on va utiliser consiste à jouer avec un pseudo-element CSS3.
Au niveau du support, on est à un bon niveau vu que ça devrait marcher sur IE8 et supérieur et tous les navigateurs modernes.

Structure HTML

Au niveau de la structure au aura besoin que 2 div :

Code CSS

Au niveau du CSS, c’est une des plus légères car elle utilise un pseudo-élément et très pratique pour la réutilisation future (on va en faire un objet CSS).

Répondre