Giá trị center của align-items trong CSS Flexbox

Giá trị center của align-items căn chỉnh các flex items ở giữa trục chéo (cross-axis) trong từng dòng.

Ví dụ: align-items: center

<!DOCTYPE html>
<html>
<head>
  <style>
    .mycontainer {
      display: flex;
      background-color: #e67e22;
      align-items: center;
      height: 150px;
      width: 600px;
      padding: 10px;
      gap: 10px;
    }
    .mycontainer > div {
      background-color: white;
      text-align: center;
      line-height: 40px;
      font-size: 25px;
      width: 100px;
      border-radius: 4px;
    }
  </style>
</head>
<body>
  <h1>Quiz</h1>
  <div class="mycontainer">
    <div>Q1</div>
    <div>Q2</div>
    <div>Q3</div>
    <div>Q4</div>
  </div>
</body>
</html>

Khi flex-direction: row (mặc định)

• Cross axis = Vertical (dọc)
• align-items: center → Căn giữa dọc

Khi flex-direction: column

• Cross axis = Horizontal (ngang)
• align-items: center → Căn giữa ngang

Căn giữa hoàn hảo (Perfect Centering)

.perfect-center {
  display: flex;
  justify-content: center; /* Trục chính */
  align-items: center;     /* Trục chéo */
  height: 100vh;
}

So sánh align-items values

Ứng dụng phổ biến

• Icon + text inline: align-items: center
• Navbar: logo + nav links căn giữa dọc
• Card: image + content căn giữa
• Modal/dialog căn giữa màn hình

Ghi đè cho 1 item: align-self

.item-special {
  align-self: flex-start; /* Item này căn trên, các item khác giữa */
}