Discussion :

[Stéphane le calme]

Centrage vertical en CSS : comment la propriété align-content simplifie la vie des développeurs.
Elle permet de se passer de Flexbox et Grid, mettant fin aux structures de conteneurs div supplémentaires

Depuis Chrome 123, Edge 123, Firefox 125, Safari 17.4, vous pouvez utiliser la propriété align-content de CSS Box Alignment pour les mises en page de blocs et de tables. Cela permet un alignement de la direction des blocs sans avoir à vous servir de la méthode Flexbox ou grid. Si Flexbox et Grid ont grandement simplifié le centrage vertical, ils ont également introduit des complexités supplémentaires. Parfois, vous aviez besoin d’une structure de conteneurs supplémentaire pour obtenir le résultat souhaité. Avec la propriété align-content, tout cela devient plus simple.

Le statu quo en matière d'alignement CSS consiste à passer à flexbox ou à grid, car align-content ne fonctionne pas dans la mise en page par défaut (flow). En 2024, les navigateurs ont implémenté align-content pour la mise en page flow. Cela présente quelques avantages :

• Vous n'avez pas besoin de flexbox ou de grid, mais seulement d'une propriété CSS pour l'alignement.
• Par conséquent, le contenu n'a pas besoin d'être enveloppé dans une div.

Code CSS :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
<!-- Marche -->
<div style="display: grid; align-content: center;">
  Content.
</div>

Code CSS :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
<!-- ÉCHOUE! -->
<div style="display: grid; align-content: center;">
  Content with <em>multiple</em> nodes.
</div>

Code CSS :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
<!-- Marche avec le content wrapper -->
<div style="display: grid; align-content: center;">
  <div>  <!-- The extra wrapper -->
    Content with <em>multiple</em> nodes.
  </div>
</div>

Code CSS :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
<!-- Marche sans le content wrapper -->
<div style="align-content: center;">
  Content with <em>multiple</em> nodes.
</div>

Après des décennies de progrès, CSS dispose enfin d'une propriété unique pour contrôler l'alignement vertical !

align-content, syntaxe et valeurs

La propriété CSS align-content définit la façon dont l'espace est réparti entre et autour des éléments le long de l'axe en bloc du conteneur (c'est-à-dire l'axe orthogonal à l'axe d'écriture) lorsque celui-ci est un conteneur de boîte flexible et le long de l'axe principal lorsque le conteneur est une grille.

Cette propriété n'aura aucun effet sur les boîtes flexibles disposées sur une seule ligne (celles avec flex-wrap: nowrap par exemple).

Voici sa syntaxe

Code CSS :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
/* Alignement le long de l'axe */
/* Note : align-content ne prend pas en charge les valeurs left et right */
align-content: center; /* Les éléments sont groupés au centre */
align-content: start; /* Les éléments sont groupés au début  */
align-content: end; /* Les éléments sont groupés à la fin */
align-content: flex-start; /* Les éléments flexibles sont groupés au début */
align-content: flex-end; /* Les éléments flexibles sont groupés à la fin */
 
/* Alignement normal */
align-content: normal;
 
/* Alignement sur la ligne de base */
align-content: baseline;
align-content: first baseline;
align-content: last baseline;
 
/* Répartition de l'espace */
align-content: space-between; /* L'espace est réparti entre
                                 les éléments, le premier est
                                 accolé au bord et le dernier
                                 également. */
align-content: space-around; /* L'espace est réparti entre les
                                 éléments avec un demi-espace
                                 au début et à la fin */
align-content: space-evenly; /* L'espace est réparti entre les
                                 éléments et autour */
align-content: stretch; /* Les éléments dimensionnés avec
                                 auto sont étirés également
                                 afin de remplir le conteneur*/
 
/* Gestion du dépassement */
align-content: safe center;
align-content: unsafe center;
 
/* Valeurs globales */
align-content: inherit;
align-content: initial;
align-content: unset;

Valeurs :

• start : Les éléments sont regroupés vers le bord au début de l'axe de bloc.
• end : Les éléments sont regroupés vers le bord à la fin de l'axe de bloc.
• flex-start : Les éléments flexibles sont regroupés vers le bord au début de l'axe de bloc. Cette valeur ne s'applique qu'aux éléments fils d'un conteneur flexible, sinon elle est synonyme de start.
• flex-end : Les éléments flexibles sont regroupés vers le bord au début de l'axe de bloc. Cette valeur ne s'applique qu'aux éléments fils d'un conteneur flexible, sinon elle est synonyme de end.
• center : Les éléments sont regroupés au centre de l'axe de bloc.
• normal : Les éléments sont groupés sur leur position par défaut, comme si align-content n'avait pas été défini.
• baseline first baseline last baseline : Ces valeurs permettent de définir l'alignement par rapport à la ligne de base pour l'élément du conteneur avec la ligne de base la plus haute ou la plus basse. Si first baseline n'est pas prise en charge, la valeur correspondra à start, si last baseline n'est pas prise en charge, la valeur correspondra à end.
• space-between : Les éléments sont équirépartis le long de l'axe en bloc. L'espace obtenu est le même entre chaque élément, le premier élément est aligné sur le bord au début du conteneur et le dernier élément est aligné sur le bord à la fin du conteneur.
• space-around : Les éléments sont équirépartis le long de l'axe en bloc. L'espace obtenu est le même entre chaque élément, la moitié de cet espace est utilisée entre le premier élément et le bord au début du conteneur et la moitié de cet espace est utilisée entre le dernier élément et le bord à la fin du conteneur
• space-evenly : Les éléments sont équirépartis le long de l'axe en bloc. L'espace obtenu est le même entre chaque élément, entre le premier élément et le bord du conteneur et entre le dernier élément et le bord du conteneur.
• stretch : Si la somme des tailles des éléments est inférieure à la taille du conteneur pour l'axe en bloc, les éléments dimensionnés automatiquement seront élargis de la même longueur tout en respectant les contraintes imposées par max-height/max-width (ou par les fonctionnalités équivalentes), afin que l'ensemble des éléments remplisse exactement le conteneur.
• safe : Ce mot-clé est utilisé avec un mot-clé pour l'alignement. Si l'élément dépasse du conteneur avec la valeur d'alignement indiquée, l'élément sera alors aligné avec la valeur start.
• unsafe : Ce mot-clé est utilisé avec un mot-clé pour l'alignement. Quelle que soit la taille et le dépassement éventuellement occasionné, l'élément est aligné avec la valeur indiquée.

align-content dans les mises en page modulables et sous forme de grille

Vous avez probablement utilisé align-content pour aligner des éléments Flex ou des pistes de grille. Dans une mise en page Flex, la propriété align-content est utilisée sur le conteneur Flex pour aligner les éléments Flex sur l'axe transversal. Dans l'exemple suivant, la valeur est space-between. L'espace disponible dans le conteneur Flex est ainsi réparti entre les lignes flexibles.

Code CSS :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
.flex {
  border: 5px solid #1a73e8;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-content: space-between;
  padding: 10px;
  width: 550px;
  height: 300px;
}
 
.flex > div {
  width: 100px;
  height: 100px;
}
 
.flex > div:nth-child(3n + 1) {
  background-color: #006bee;
}
 
.flex > div:nth-child(3n + 2) {
  background-color: #fca300;
}
 
.flex > div:nth-child(3n + 3) {
  background-color: #05a749;
}

Résultat

Centrer un élément verticalement

align-content est particulièrement utile pour centrer un élément verticalement dans un conteneur. Pour ce faire, utilisez display: flex avec align-content: center. L'élément devient alors un élément modulable, et d'autres comportements d'élément modulables par défaut sont également appliqués. Dans l'exemple suivant, l'en-tête est centré verticalement avec align-content: center. L'élément est alors rétréci pour s'adapter au contenu. Vous devez donc appliquer flex-grow: 1 à l'élément.

Code CSS :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
 
 
.center {
  border: 5px solid #1a73e8;
  display: flex;
  flex-wrap: wrap;
  align-content: center;
  padding: 10px;
  max-width: 550px;
  height: 300px;
}
 
h1 {
  background-color: #006bee;
  color: #fff;
  padding: 10px;
  flex-grow: 1;
}

Résultat

Avantages et cas d’utilisation

Les avantages de cette nouveauté sont évidents :

• Simplicité : Vous n’avez besoin que d’une seule ligne de CSS pour centrer verticalement un élément. Moins de code signifie moins de risques d’erreurs et une maintenance plus facile.
• Compatibilité : la propriété align-content est prise en charge par la plupart des navigateurs modernes. Vous pouvez l’utiliser sans vous soucier des problèmes de compatibilité.
• Cas d’utilisation : Boutons, icônes, titres, images – partout où le centrage vertical est crucial, cette propriété vous simplifie la vie.

Conclusion

En 2024, CSS a franchi une étape importante en facilitant le centrage vertical. Les développeurs peuvent désormais créer des mises en page plus élégantes et plus propres sans jongler avec des astuces. Alors, profitez de cette nouvelle fonctionnalité et rendez vos designs encore plus professionnels !

Tester dans codepen (1, 2)

Sources : historique du centrage vertical, documentation, propriété align-content, groupe de travail de CSS

Et vous ?

Quelle méthode de centrage vertical préférez-vous avant l’ajout de la propriété align-content ? Avez-vous déjà utilisé d'autres méthodes comme le positionnement absolu, les cellules de tableau ou les lignes de contenu en ligne pour centrer verticalement des éléments. Pouvez-vous faire un retour d'expérience ?
Pensez-vous que la simplification du centrage vertical en CSS est bénéfique pour les développeurs ? La propriété align-content va-t-elle simplifier votre travail ou préférez-vous toujours vous servir de Flexbox ou Grid ?
Quels sont les cas d’utilisation spécifiques où le centrage vertical est crucial pour vous ? Partagez des exemples concrets où le centrage vertical est essentiel dans vos projets. Peut-être des éléments de design, des boutons, des icônes, etc. ?
Pensez-vous que CSS devrait continuer à évoluer pour simplifier d’autres aspects de la mise en page ? Avez-vous des idées pour améliorer davantage la gestion de la mise en page ? Élargissez la discussion en abordant d’autres fonctionnalités CSS.

[Daïmanu]

Quelle méthode de centrage vertical préférez-vous avant l’ajout de la propriété align-content ? Avez-vous déjà utilisé d'autres méthodes comme le positionnement absolu, les cellules de tableau ou les lignes de contenu en ligne pour centrer verticalement des éléments. Pouvez-vous faire un retour d'expérience ?
Les flexbox, qui fonctionnent très bien mais demandent beaucoup de propriétés CSS.

Pensez-vous que la simplification du centrage vertical en CSS est bénéfique pour les développeurs ? La propriété align-content va-t-elle simplifier votre travail ou préférez-vous toujours vous servir de Flexbox ou Grid ?
Je suis surpris de voir que cette propriété est étonnamment bien disponible (à part le sempiternel IE, mais bon il faut tourner la page maintenant) donc à priori oui.

Pensez-vous que CSS devrait continuer à évoluer pour simplifier d’autres aspects de la mise en page ? Avez-vous des idées pour améliorer davantage la gestion de la mise en page ? Élargissez la discussion en abordant d’autres fonctionnalités CSS.
Avec les flexbox, les grid layout et les table layout je pense qu'on est largement bien équipé maintenant.

[Zefling]

C'est cool que ça soit disponible partout depuis avril. (Source MDN)
C'est plus vraiment une actu, y'a d'autres trucs plus intéressant et plus puissant qui arrivent dans le CSS, comme : Anchor Positioning, Scroll-driven Animations, @starting-style