Adakah terdapat cara untuk memaksa teks dalam flexbox dipusatkan secara menegak, tidak kira apa kod CSS lain yang kita ada?

Question

Saya mempunyai kod CSS berikut, yang merupakan sebahagian daripada kod CSS yang lebih besar yang digunakan dalam tapak web yang saya bangunkan:

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

Dalam kod HTML saya ada:

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

Tetapi teks Text Sample 1 和 Text Sample 2 tidak berpusat secara menegak, tetapi di bahagian atas kotak fleksibel. Nampaknya sesuatu dalam kod CSS besar saya mengganggu, tetapi saya tidak tahu apa. Soalan saya adalah dengan mengandaikan kita tidak tahu apakah CSS yang lain, bolehkah kita memaksa bahagian ini untuk melakukan apa yang kita mahu, iaitu memusatkan teks secara menegak dalam flexbox?

Answer 1

Ini berlaku kerana .cards-u tidak mempunyai sebarang ketinggian yang ditentukan. Ia mengambil ketinggian kandungan sebagai ketinggiannya sendiri dan mengekalkan kandungan dalam kawasan itu.

Anda harus memberi .cards-u ketinggian halaman penuh menggunakan 100vh, atau lakukan perkara berikut:

.cards-u{
  position: relative;
}

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

}