Giá trị center của justify-content trong CSS Flexbox

Giá trị center của justify-content căn giữa các flex items trên trục chính (main axis) khi có không gian thừa.

Ví dụ: justify-content: center

<!DOCTYPE html>
<html>
<head>
  <style>
    .mycontainer {
      display: flex;
      background-color: #e74c3c;
      justify-content: center;
      padding: 10px;
      gap: 10px;
    }
    .mycontainer > div {
      background-color: #e67e22;
      text-align: center;
      line-height: 60px;
      font-size: 30px;
      width: 100px;
      margin: 5px;
      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)

Main axis = Ngang
justify-content: center → Căn giữa ngang

Khi flex-direction: column

Main axis = Dọc
justify-content: center → Căn giữa dọc

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

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

So sánh justify-content values

Giá trị	Vị trí items	Khoảng cách
`flex-start`	Đầu	Cuối
`center`	Giữa	Chia 2 đầu
`flex-end`	Cuối	Đầu
`space-between`	2 đầu chạm mép	Đều giữa items
`space-around`	Nửa khoảng cách	Đều quanh items
`space-evenly`	Đều mọi nơi	Y hệt mọi khoảng

Ứng dụng phổ biến

Hero section: tiêu đề + nút bấm căn giữa
Modal/Dialog: căn giữa màn hình
Pagination: số trang căn giữa
Loading spinner: căn giữa container
Empty state: illustration + text căn giữa

Kết hợp với gap

.nav {
  display: flex;
  justify-content: center;
  gap: 2rem; /* Khoảng cách giữa items */
}