有沒有辦法強制彈性框中的文字垂直居中，無論我們有什麼其他 CSS 程式碼？

Question

我有以下 CSS 程式碼，它是我正在開發的網站中使用的更大 CSS 程式碼的一部分：

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

在 HTML 程式碼中我有：

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

但是文字 Text Sample 1 和 Text Sample 2 並未垂直居中，而是位於 Flexbox 的頂部。 看起來我的大型 CSS 程式碼中的某些內容正在幹擾，但我不知道是什麼。 我的問題是假設我們不知道 CSS 的其餘部分是什麼，我們可以強制這部分執行我們想要的操作，即將文字在彈性框中垂直居中嗎？

Answer 1

發生這種情況是因為 .cards-u 沒有定義任何高度。它將內容的高度作為自身的高度並將內容保持在該區域內。

您應該使用 100vh 為 .cards-u 提供完整頁面高度，或執行以下操作：

.cards-u{
  position: relative;
}

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

}