CSS : Comment centrer un élément qui dépasse de son parent ?

Il existe des dizaines de manières de centrer (verticalement ou horizontalement) un élément dans son parent en CSS lorsque le parent est plus grand que son contenu.

Mais lorsque c'est l'inverse qui se produit ça devient plus compliqué, surtout si l'un comme l'autre ont des tailles variables.

Ce n'est pas réellement plus compliqué, vous allez voir que le code est très simple, mais il fallait en avoir l'idée.

Cette problématique peut notamment arriver lorsque vous souhaitez afficher une vidéo qui doit couvrir tout l'écran (et être centrée), peu importe son ratio, personnellement c'est pour régler ce problème que j'ai eu recours à cette solution.

La même problématique n'arriverait pas forcément avec une image, car on pourrait la passer en "background-size: cover;" et "background-position: center center;"

Sauf qu'on ne peut pas faire ça à chaque fois ! Alors voici le morceau de CSS qui va vous permettre de centrer (verticalement ou horizontalement) un élément enfant plus grand que l'élément dans lequel il est contenu.

La solution

Voici le petit morceau de code qui peut vous faire gagner pas mal de temps :

.child {
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}

Vous voyez, c'est très simple, c'est universel et ça marche partout ! Si vous pensez que c'est de la magie, continuez de lire l'article, je vous explique le fonctionnement de cette technique.

À noter que la solution fonctionne aussi quand le parent est plus grand et est compatible avec tous les navigateurs (97,98%, IE9+) !

Résultat

.parent { width: 300px; height: 200px; padding: 20px; box-sizing: border-box; border-radius: 5px; box-shadow: 0px 0px 10px 5px rgba(0,0,0,0.1); } .child { position: relative; background-color: #2c3e50; border-radius: 5px; width: 100%; height: 300px; top: 50%; transform: translateY(-50%); }

Ici j'ai choisi de ne pas mettre "overflow: hidden;" sur l'élément parent pour vous montrer où se passe l'overflow, mais à vous de décider de le cacher ou non selon votre cas d'usage !

Explication

La propriété "top" en CSS, lorsqu'elle est utilisée avec un pourcentage, permet de déplacer l'élément enfant rapport à son parent positionné le plus proche (tout sauf position: static).

Le pourcentage est donc relatif à la taille du parent (en l'occurence la hauteur), "top: 50%;" vient donc placer le haut de l'élement enfant à la moitié de la hauteur du parent.

Mais là où l'astuce est savante, c'est que pour la propriété "transform: translateY(n%);" le pourcentage est équivalent à la hauteur de l'élément sélectionné (ici l'élément enfant).

Donc, pour un élément parent avec une hauteur de 200px et un élément enfant de 300px, "top: 50%" sera égal à 100px, tandis que "translateY(-50%);" sera égal à -150px.

100 - 150 = -50px, le haut de l'élément enfant va donc se placer au dessus (en overflow) du haut de l'élément parent, et sera donc centré.

À l'inverse, si le parent fait 400px de haut, le calcul sera égal à 50px et sera aussi centré mais sans dépassement cette fois !