13 façons de centrer verticalement

Dans le bon vieux temps, les limites du CSS étaient telles que même des choses « simples” comme le centrage vertical posaient un défi, certains d’entre nous s’appuyant même sur des solutions JavaScript. C’était fragile, c’était très contraint, et il y avait toujours cette exception qui le faisait échouer.

Que nous essayions d’aligner une icône ou une image à côté du texte, de créer l’une de ces bannières populaires de « héros” ou d’une superposition modale, centrer les choses dans l’axe vertical était toujours une difficulté.

Mais CSS a parcouru un long chemin depuis, fournissant de nombreuses méthodes qui ont facilité le centrage vertical à chaque fois. Voici un résumé de certains d’entre eux, ainsi que leurs cas d’utilisation et leurs limites.

Positionnement absolu et marge auto

Un élément sans taille intrinsèque peut être « centré » en utilisant simplement des valeurs égales du haut et du bas. Lorsque l’élément a des dimensions intrinsèques, nous pouvons utiliser 0 pour le haut et le bas, puis appliquer margin auto. Cela centrera automatiquement l’élément:

.container{ position:relative;}.element{ position:absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; height: 20px; /*requires explicit height*/}

Voir le stylo
Centrage 1: positionnement absolu par Facundo Corradini (@facundocorradini)
sur CodePen.

La limitation est, bien sûr, que la hauteur de l’élément doit être explicitement déclarée, sinon elle occupera tout le conteneur.

Le top 50% classique traduit -50%

C’est l’un des premiers, et toujours un incontournable, pour de nombreux développeurs. Une astuce simple, en s’appuyant sur un positionnement absolu de l’élément intérieur à 50% du haut de son parent, puis en le traduisant à 50% de sa hauteur :

.container{ position: relative;}.element{ position: absolute; top: 50%; transform: translateY(-50%);}

Voir le stylo
Centrage 2: top 50 des traductions -50 par Facundo Corradini (@facundocorradini)
sur CodePen.

Une approche assez solide, la seule limitation majeure étant l’utilisation de translate qui pourrait gêner d’autres transformations, par exemple lors de l’application de transitions / animations.Tables

. Oui, je viens de dire tables.

Une approche très simple et l’une des premières (à l’époque, tout était des tables), utilise le comportement des cellules de table et l’alignement vertical pour centrer un élément sur le conteneur.

Cela peut être fait avec des tables réelles (honte, honte, honte), ou en utilisant du HTML sémantique, en basculant l’affichage de l’élément sur table-cell:

.container{ display: table; height: 100%;}.element{ display: table-cell; text-align: center; vertical-align: middle;}

Voir le stylo
Centrage 3: tables de Facundo Corradini (@facundocorradini)
sur CodePen.

Cela fonctionne même lorsque les deux éléments sont de hauteur inconnue. La limitation majeure est bien sûr si vous devez avoir un frère non centré, et cela peut devenir délicat avec les limites d’arrière-plan.

Gardez également à l’esprit que cela échoue totalement sur les lecteurs d’écran (même si votre balisage est basé sur divs, définir l’affichage CSS sur table et table-cell obligera les lecteurs d’écran à l’interpréter comme une table réelle). Loin d’être le meilleur en matière d’accessibilité.

La méthode de l’élément fantôme

Un autre ancien, qui n’a pas rattrapé pour une raison quelconque, utilise un bloc en ligne avec un élément fantôme (pseudo) qui a 100% de hauteur du parent, puis définit la propriété vertical-align sur middle:

.container::before { content: ''; display: inline-block; height: 100%; vertical-align: middle; margin-left: -1ch;}.element{ display: inline-block; vertical-align: middle;}

Voir le stylo
Centrage 4: méthode de l’élément fantôme par Facundo Corradini (@facundocorradini)
sur CodePen.

Cela fonctionne en fait assez bien, le « problème” le plus notable étant qu’il déplace le centre horizontal un tout petit peu vers la droite, à cause du comportement toujours grinçant des espaces entre les éléments de bloc en ligne.

Cela peut être traité comme nous le ferions avec le problème des blocs en ligne dans tout autre contexte, l’approche la plus simple étant la margin-left-1ch que j’ai utilisée ci-dessus (bien que cela ne soit pas précis à 100% sauf sur les polices monospaces, car l’unité ch signifie la largeur du caractère « 0”), ou définir la taille de la police à 0 sur le conteneur puis la réinitialiser à px ou rem sur l’élément. Pas optimal, pour dire du moins.

Margin auto sur un élément flexible

Enfin entré dans le territoire CSS moderne, flexbox a introduit un comportement assez impressionnant pour les marges automatiques. Maintenant, il va non seulement centrer horizontalement l’élément comme il l’a fait dans les mises en page de blocs, mais aussi le centrer dans l’axe vertical:

.container{ display:flex;}.element{ margin:auto;}

Voir le stylo
Centrage 5: margin:auto sur un élément flexible par Facundo Corradini (@facundocorradini)
sur CodePen.

Cette tactique est l’une de mes préférées en raison de sa simplicité, la seule limitation majeure est qu’elle ne fonctionnera qu’avec un seul élément.

Pseudo-éléments sur un conteneur flexible

Pas l’approche la plus pratique au monde, mais nous pouvons également utiliser des pseudo-éléments flexibles et vides pour pousser l’élément au centre:

.container{ display:flex;}.element{ margin:auto;}

Voir le stylo
Centrage 6: pseudos sur une flexbox par Facundo Corradini(@ facundocorradini)
sur CodePen.

Cela peut être utile lorsque nous voulons garder un espacement flexible sur un conteneur flexible orienté colonne avec plusieurs éléments.

7&8. Aligner sur le conteneur flexible ou l’élément flexible

Flexbox a également introduit de très bonnes propriétés d’alignement (qui sont maintenant intégrées dans leur propre module d’alignement de boîte). Cela nous permet de contrôler comment les éléments sont placés et comment l’espace vide est distribué de manière à ce qu’il aurait fallu des nombres magiques en CSS pour un nombre spécifique d’éléments (ou un JS assez intelligent pour les montants dynamiques).

En fonction de la direction de flexion, nous pouvons utiliser justify-content ou align-items pour ajuster au besoin.

Sur le conteneur:

.container{ display: flex; justify-content: center; align-items: center;}

Voir le stylo
Centrage 7: aligner sur le conteneur flexible par Facundo Corradini (@facundocorradini)
sur CodePen.

Sur un élément flexible particulier:

.container{ display: flex;}.element{ align-self: center; margin: 0 auto;}

Voir le stylo
Centrage 8: aligner sur l’élément flexible par Facundo Corradini (@facundocorradini)
sur CodePen.

Pas beaucoup d’inconvénients à cela, sauf si vous devez prendre en charge les navigateurs plus anciens. IE 11 devrait fonctionner, mais sa mise en œuvre de flexbox est assez boguée, elle doit donc toujours être traitée avec un soin particulier. IE 10 nécessite un travail supplémentaire car il est basé sur un brouillon plus ancien et précoce de la spécification qui a une syntaxe différente et nécessite le préfixe -ms vendor.

9&10. Aligner sur le conteneur de grille ou l’élément de grille

La grille CSS comprend à peu près les mêmes options d’alignement que flexbox, nous pouvons donc l’utiliser sur le conteneur de grille:

.container{ display: grid; align-items: center; justify-content: center;}

Voir le stylo
Centrage 9: aligner sur le conteneur de grille par Facundo Corradini (@facundocorradini)
sur CodePen.

Ou simplement sur un élément de grille spécifique:

.container{ display: grid;}.element{ justify-self: center; align-self: center}

Le manque de support du navigateur hérité est la seule limitation de cette technique.

Voir le Stylo
Centrage 10: aligner sur l’élément de grille par Facundo Corradini (@facundocorradini)
sur CodePen.

Pseudo-éléments sur une grille

De manière similaire à l’alternative flexbox, nous pourrions utiliser une grille à trois lignes avec des pseudo-éléments:

.container{ display: grid; grid-template-columns: 1fr; grid-template-rows: repeat(3, 1fr);}.container::before,.container::after{ content:"";}

Rappelez-vous que 1fr signifie en fait minmax(auto, 1fr), donc les lignes vides ne prendront pas nécessairement un tiers de la hauteur du conteneur. Ils s’effondreront au besoin jusqu’à leur valeur minimale d’auto, et sans contenu, signifie 0.

Voir le Stylo
Centrage 11: grille + pseudos de Facundo Corradini (@facundocorradini)
sur CodePen.

Cela peut sembler une approche idiote, mais cela nous permet de retirer facilement l’une de mes astuces de grille CSS préférées: combiner des lignes fr avec des lignes minmax, ce qui entraînera d’abord l’effondrement des lignes fr vides, puis des lignes mixmax. Jenn Simmons a d’excellents exemples à ce sujet.

Ainsi, le fait que les pseudos prennent les lignes entièrement pliables permettra à l’algorithme de placement automatique de travailler sa magie sur nos éléments réels. Sauf si nous devons prendre en charge IE, qui manque de placement automatique. Ce qui nous amène à la méthode suivante

Placement de ligne de grille explicite

La grille CSS permet de placer explicitement des éléments sur une ligne spécifique, donc la même déclaration de grille que ci-dessus et l’élément placé sur la deuxième ligne suffiront:

.container{ display:grid; grid-template-columns:1fr; grid-template-rows: repeat(3, 1fr);}.element{ grid-row: 2 / span 1; /* or grid-row: 2/3 */}

Celui-ci peut fonctionner jusqu’à IE10. Croyez-le ou non, IE a été l’un des premiers et plus forts partisans de CSS grid, l’expédiant depuis 2011 avec IE10. Il est basé sur un brouillon très précoce qui a une syntaxe complètement différente, mais nous pouvons le faire fonctionner:

.container{ display: -ms-grid; -ms-grid-rows: (1fr); -ms-grid-columns: 1fr;}.element{ -ms-grid-column: 1; -ms-grid-row: 2;}

Voir le stylo
Centrage 12: placement explicite sur une grille par Facundo Corradini (@facundocorradini)
sur CodePen.

Margin auto sur un élément de grille

De la même manière que flexbox, l’application de margin-auto sur un élément de grille le centre sur les deux axes.

.container{ display: grid;}.element{ margin: auto;}

Voir le Stylo
Centrage 12: placement explicite sur une grille par Facundo Corradini (@facundocorradini)
sur CodePen.

Certaines implémentations futures (probables)

Selon la spécification de niveau 3 du module d’alignement des boîtes CSS, align-content devrait fonctionner sur l’axe des blocs des conteneurs blocs et des conteneurs multicolores, donc (si les navigateurs l’implémentent) nous devrions pouvoir centrer le contenu de ces conteneurs comme nous le faisons dans les conteneurs flex ou grid.

Conclusion