Gibt es eine Möglichkeit, die vertikale Zentrierung des Texts in der Flexbox zu erzwingen, unabhängig davon, welchen anderen CSS-Code wir haben?

Question

Ich habe den folgenden CSS-Code, der Teil eines größeren CSS-Codes ist, der in einer Website verwendet wird, die ich entwickle:

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

Im HTML-Code habe ich:

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

Aber der Text Text Sample 1 和 Text Sample 2 ist nicht vertikal zentriert, sondern oben in der Flexbox. Es sieht so aus, als würde etwas in meinem großen CSS-Code stören, aber ich weiß nicht was. Meine Frage lautet: Angenommen, wir wissen nicht, was der Rest des CSS ist. Können wir diesen Teil zwingen, das zu tun, was wir wollen, nämlich den Text in der Flexbox vertikal zu zentrieren?

Answer 1

发生这种情况是因为 .cards-u 没有定义任何高度。它将内容的高度作为自身的高度并将内容保持在该区域内。

您应该使用 100vh 为 .cards-u 提供完整页面高度，或者执行以下操作：

.cards-u{
  position: relative;
}

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

}