Forum : Flexbox colonne comment centrer un texte sur l'axe Y ?

Bonjour,
Je n'arrive pas à centrer mes textes à l'intérieur de mes flexbox, voir capture d'écran ci-dessous :

Voici le code que j'ai actuellement :

<!DOCTYPE html> <html> <body id="body"> <link rel="stylesheet" type="text/css" href="main.css" /> <div class="intro" id="intro"> <div class="name" id="name">name</div> <div class="company" id="company">company</div> <div class="year" id="year">2022</div> </div> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Test</title> </head> </body> </html>

html, body { margin: 0; height: 100%; background: black; } #intro { display: flex; height: 100vh; flex-direction: column; align-items: center; gap: 10px; background: blueviolet; } @font-face { font-style: normal; } #name { background-color: rgb(0, 249, 249); flex: 1; font-size: 20px; color: #ffffff; } #company { text-align: center; background-color: red; flex: 2; font-size: 80px; text-align: center; color: #ffffff; } #year { background-color: green; flex: 1; font-size: 20px; font-family: "Rubik"; color: #ffffff; }

Voici également un codepen qui illustre bien mon souci :

https://codepen.io/ogames/pen/rNvrrrQ

Ce que je veux

Avoir mes textes centrés verticalement par rapport à mes boites. ex: 'company" devrait être axé au milieu de la boite rouge sur l'axe Y.
Pouvoir utiliser les propriétés de dimensionnement avec flex afin de composer mes titres/informations en entrant des valeurs spécifiques pour mes différents éléments, exemple :

#company flex : 2; ...

Ce que j'obtiens

Mes textes sont calés vers le haut, peu importe que je spécifie dans #intro:
align-items: center;
align-content : center;

Pourquoi ?

Flexbox colonne comment centrer un texte sur l'axe Y ?

2 réponses

company {