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

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

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

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>

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

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;

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; 
}

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; 
}