Căn giữa phần tử (Element) dọc và ngang với CSS Flexbox

Tương tự như căn giữa button, bạn có thể căn giữa bất kỳ phần tử nào (text, div, image, form...) bằng Flexbox.

Ví dụ mã nguồn

<!DOCTYPE html>
<html>
<head>
<style>
  body {
    font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  }
  .centered {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 200px;
    border: 3px solid rgb(0, 70, 128);
  }
</style>
</head>
<body>
<h1>Ví dụ Căn giữa</h1>
<div class="centered">
  <h2>Văn bản này được căn giữa dọc và ngang</h2>
</div>
</body>
</html>

Mở rộng: Căn giữa nhiều phần tử

.centered {
  display: flex;
  flex-direction: column; /* Xếp dọc */
  justify-content: center;
  align-items: center;
  gap: 20px; /* Khoảng cách giữa các phần tử con */
}

Grid cách viết ngắn gọn hơn

.centered {
  display: grid;
  place-items: center; /* Tương đương justify-items:center + align-items:center */
  height: 200px;
}

Khi nào dùng cách nào?

• Flexbox: Cần kiểm soát hướng (row/column), gap, wrapping
• Grid: Layout 2D, căn giữa đơn giản nhất với place-items
• Position + Transform: Chỉ khi không thể thay đổi display của container