Existe-t-il un moyen de forcer le texte de la flexbox à être centré verticalement, quel que soit l'autre code CSS dont nous disposons ?

Question

J'ai le code CSS suivant, qui fait partie d'un code CSS plus large utilisé dans un site Web que je développe :

.cards-u {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}

.card-u {
  margin: 20px;
  padding: 20px;
  width: 160px;
  height: 160px;
  line-height: 120px;
  justify-content: center;
  align-items: center;
  text-align: center;
  align-self: center;
  flex-direction: column;
  border-radius: 10px;
  box-shadow: 0px 6px 10px rgba(0, 0, 0, 0.25);
  transition: all 0.2s;
  text-decoration: none;
}

.card-1-u {
  background: radial-gradient(#1fe4f5, #3fbafe);
}

Dans le code HTML j'ai :

<div class="cards-u">
 <a href="https://example.com" class="card-u card-1-u" style="text-decoration: none;">
   <h3>Text Sample 1</h3> 
 </a>
 <a href="https://example.com" class="card-u card-1-u" style="text-decoration: none;">
  <h3>Text Sample 2</h3> 
 </a>
</div>

Mais le texte Text Sample 1 和 Text Sample 2 n'est pas centré verticalement, mais en haut de la flexbox. Il semble que quelque chose interfère dans mon gros code CSS, mais je ne sais pas quoi. Ma question est en supposant que nous ne savons pas ce qu'est le reste du CSS, pouvons-nous forcer cette partie à faire ce que nous voulons, c'est-à-dire centrer verticalement le texte dans la flexbox ?

Answer 1

Cela se produit parce que .cards-u n'a pas de hauteur définie. Il prend la hauteur du contenu comme sa propre hauteur et maintient le contenu dans cette zone.

Vous devez donner à .cards-u la hauteur complète de la page en utilisant 100vh, ou procéder comme suit :

.cards-u{
  position: relative;
}

.card-u{
    position: absolute;
    top: 50%;
    transform: translateY(-50%);

}