Căn giữa ngang và dọc với Flexbox trong CSS3

Flexbox là cách dễ nhất để căn giữa element cả ngang lẫn dọc. Chỉ cần 3 dòng CSS trên container:

Ví dụ

<!DOCTYPE html>
<html>
<head>
  <style>
    body {
      font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
    }
    .h-container {
      display: flex;
      width: 300px;
      height: 300px;
      background-color: lightblue;
      justify-content: center;  /* Căn giữa ngang */
      align-items: center;      /* Căn giữa dọc */
      border: 2px solid black;
    }
    .h-1 {
      font-size: 30px;
      width: 150px;
      height: 150px;
      background-color: red;
      color: white;
      border: 2px solid rgb(58, 2, 83);
      display: flex;
      justify-content: center;
      align-items: center;
    }
  </style>
</head>
<body>
  <h2>Căn Giữa Ngang Và Dọc Với Flexbox</h2>
  <div class="h-container">
    <div class="h-1">Div Đã Căn Giữa</div>
  </div>
</body>
</html>

Kết quả

Hộp đỏ 150x150px nằm chính giữa hộp xanh 300x300px, chữ "Div Đã Căn Giữa" cũng căn giữa trong hộp đỏ.

Tóm tắt

Mặc định flex-direction: row → main axis = ngang, cross axis = dọc.