CSS : en 2024, le « centrage vertical » arrive enfin

• CSS ajoute enfin align-content à la mise en page par défaut, ce qui permet un alignement vertical avec une seule propriété CSS
  • Versions prises en charge : Chrome 123, Firefox 125, Safari 17.4
• Jusqu’à présent, align-content ne fonctionnait pas dans la mise en page par défaut (flow), il fallait donc passer à flexbox ou grid
  • En 2024, les navigateurs ont enfin implémenté align-content dans la mise en page Flow
  • Désormais, plus besoin de flexbox ni de grid : une seule propriété CSS suffit pour aligner
  • Il n’est donc plus nécessaire d’envelopper le contenu dans une div

Histoire du centrage vertical

• Pendant longtemps, il n’y a pas eu de méthode simple pour faire du centrage vertical dans les navigateurs

Méthode 1 : cellule de tableau

• Sanity (sérieusement ?) : ★★★☆☆
• Il existe 4 grands modes de mise en page : flow (par défaut), table, flexbox et grid, et l’alignement du contenu varie selon le mode
• Comme flexbox et grid sont arrivés plus tard, on utilisait d’abord les tableaux

<div style="display: table;">  
  <div style="display: table-cell; vertical-align: middle;">  
    Content.  
  </div>  
</div>  

Méthode 2 : position absolue

• Sanity : ☆☆☆☆☆
• Comme la mise en page flow n’aide pas, on contourne le problème avec la position absolue

<div style="position: relative;">  
  <div style="position: absolute; top: 50%; transform: translateY(-50%);">  
    Content.  
  </div>  
</div>  

Méthode 3 : contenu inline

• Sanity : ☆☆☆☆☆
• La mise en page flow n’aide pas à l’alignement du contenu. Elle autorise seulement l’alignement vertical à l’intérieur d’une ligne
• Alors, pourquoi ne pas créer une ligne de la hauteur du conteneur ?

<div class="container">  
  ::before  
  <div class="content">Content.</div>  
</div>  

.container::before {  
  content: '';  
  height: 100%;  
  display: inline-block;  
  vertical-align: middle;  
}  
.content {  
  display: inline-block;  
  vertical-align: middle;  
}  

• Ça peut vite devenir bizarre

Méthode 4 : flexbox sur une seule ligne

• Sanity : ★★★☆☆
• Flexbox n’a commencé à être largement utilisé qu’environ 20 ans après les débuts du Web
• En mode une ligne (par défaut), la ligne occupe l’espace vertical, et align-items aligne les éléments à l’intérieur de cette ligne

<div style="display: flex; align-items: center;">  
  <div>Content.</div>  
</div>  

• Ou bien on met les lignes à la verticale et on utilise justify-content pour aligner les éléments

<div style="display: flex; flex-flow: column; justify-content: center;">  
  <div>Content.</div>  
</div>  

Méthode 5 : flexbox sur plusieurs lignes

• Sanity : ★★★☆☆
• Avec un flexbox multiligne, on peut aligner les lignes avec align-content

<div style="display: flex; flex-flow: row wrap; align-content: center;">  
  <div>Content.</div>  
</div>  

Méthode 6 : contenu grid

• Sanity : ★★★★☆
• Grid étant arrivé encore plus tard, l’alignement est devenu un peu plus simple

<div style="display: grid; align-content: center;">  
  <div>Content.</div>  
</div>  

Méthode 7 : cellule grid

• Sanity : ★★★★☆
• align-content aligne les cellules dans le conteneur, tandis que align-items aligne le contenu dans les cellules

<div style="display: grid; align-items: center;">  
  <div>Content.</div>  
</div>  

Méthode 8 : marges auto

• Sanity : ★★★☆☆
• Dans la mise en page flow, margin:auto centre horizontalement mais pas verticalement
• Flexbox et grid ne partagent pas cette incohérence

<div style="display: grid;">  
  <div style="margin-block: auto;">  
    Content.  
  </div>  
</div>  

Méthode 9 : cet article de 2024

• Sanity : ★★★★★
• Les navigateurs auraient dû ajouter ça depuis le début

<div style="align-content: center;">  
  <code>align-content</code> just works!  
</div>  

[tobesimple7]

Oh là là~ une fonctionnalité comme ça~~

[seunggi]

La chose la plus difficile en informatique : le centrage.

https://tonsky.me/blog/centering/

[mongsilsushi]

Enfin !

[sgwanlee]

Le CSS est devenu beaucoup trop facile, non ? mdr

[jwh926]

🙏🏻🙏🏻🙏🏻🙏🏻

[rulerwithcss]

oh mon dieu, croûte au fromage

[shpkc]

Enfin !

[halfenif]

Trop tard ! Trop tard ! Trop tard !

[uoayop]

Enfin.

[aer0700]

Bonne nouvelle

[koyokr]

MDR

[nemorize]

a-men

[carnoxen]

Y a-t-il un risque que cette modification désorganise la structure des sites web existants ?

[bluekai17]

Je me pose aussi la question.

[ng0301]

Enfin !

[yatmak]

L’ère du Web 3.0 est enfin arrivée.

[plaaat0102]

Les commentaires débordent de joie lol...

[godppun]

Vraiment, enfin...

[kangkung9225]

Oh… ? Il faut vraiment le faire, haha…

[qurare]

Enfin.

[savvykang]

OUAIS !!!

[joyfui]

Waouh !!!

[mkyoon]

Quel bonheur !

[wedding]

Comme je fais surtout du développement d'apps, quand j'aide pour du développement web, j'utilise sans trop réfléchir le flexbox trouvé via une recherche en me disant que c'était forcément le centrage… Mais en fait, ça n'existait pas jusqu'à maintenant ? C'est un choc…

[illiil1lii]

Hourra !

[huiya]

Enfin !

[tjddnjsjo]

Génial !

[pkj3186]

Enfin !