Căn giữa nút (Button) dọc và ngang với CSS Flexbox

Cách hiện đại và đơn giản nhất để căn giữa phần tử (button, div, image...) cả theo chiều dọc và ngang là sử dụ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; /* Căn giữa ngang */
    align-items: center;     /* Căn giữa dọc */
    height: 200px;
    border: 3px solid rgb(0, 70, 128);
  }
  button{
    font-size: 18px;
    border: none;
    padding:10px;
    background-color: darkblue;
    color:white;
  }
</style>
</head>
<body>
<h1>Ví dụ Căn giữa</h1>
<div class="centered">
  <button>Nút này được căn giữa</button>
</div>
</body>
</html>

Giải thích 2 thuộc tính then chốt

• justify-content: center - Căn giữa theo trục chính (mặc định là ngang)
• align-items: center - Căn giữa theo trục chéo (mặc định là dọc)

Các cách khác (để tham khảo)

Khuyến nghị: Dùng Flexbox hoặc Grid cho dự án mới.