Việc căn giữa các phần tử trên trang web là một yêu cầu phổ biến trong thiết kế giao diện. CSS cung cấp nhiều cách để thực hiện điều này, bao gồm cả căn giữa theo chiều ngang và chiều dọc.

Căn giữa theo chiều ngang

Đối với các thẻ block-level như div, phương pháp truyền thống là sử dụng margin tự động. Bằng cách đặt margin-left và margin-right thành auto, phần tử sẽ tự động chiếm lấy không gian còn lại ở hai bên, từ đó căn giữa nó trong phần tử cha.

.centered-element {
  margin-left: auto;
  margin-right: auto;
  width: 50%; /* Cần chỉ định chiều rộng */
}

Lưu ý rằng phương pháp này yêu cầu phần tử phải có chiều rộng được xác định rõ ràng (ví dụ: width: 50% hoặc một giá trị pixel cố định). Nếu không có chiều rộng, phần tử sẽ chiếm toàn bộ chiều rộng có sẵn và không có không gian để căn giữa.

Một cách kết hợp khác, đặc biệt hữu ích để đảm bảo tương thích trên các trình duyệt khác nhau (như IE và Firefox), là kết hợp text-align: center trên phần tử cha và margin: auto trên phần tử con.

.parent-container {
  text-align: center;
}

.child-element {
  display: inline-block; /* Hoặc float: left; margin-left: auto; margin-right: auto; */
  width: 200px; /* Chiều rộng cụ thể */
  margin: 0 auto;
}

Căn giữa theo chiều dọc

Căn giữa theo chiều dọc phức tạp hơn một chút. Dưới đây là một số kỹ thuật phổ biến:

1. Căn giữa ảnh nền

Khi sử dụng ảnh làm nền cho một phần tử, bạn có thể căn giữa nó bằng thuộc tính background-position.

.background-container {
  background-image: url('your-image.jpg');
  background-repeat: no-repeat;
  background-position: center center; /* Hoặc chỉ 'center' */
  height: 300px; /* Chiều cao của container */
}

2. Căn giữa văn bản

Để căn giữa văn bản theo chiều dọc trong một phần tử, bạn có thể sử dụng kết hợp line-height và vertical-align.

.text-container {
  height: 200px; /* Chiều cao của container */
  line-height: 200px; /* Bằng với chiều cao của container */
  text-align: center; /* Căn ngang văn bản */
  white-space: nowrap; /* Ngăn dòng bị ngắt nếu không muốn */
}

.text-container p {
  display: inline-block;
  vertical-align: middle; /* Căn dọc */
  white-space: normal; /* Cho phép xuống dòng nếu cần */
}

3. Sử dụng Position và Transform (Hiện đại)

Một phương pháp hiện đại và linh hoạt hơn là sử dụng position: absolute kết hợp với transform.

.absolute-center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 200px; /* Chiều rộng và chiều cao tùy chỉnh */
  height: 100px;
  background-color: lightblue;
}

Kỹ thuật này hoạt động bằng cách di chuyển điểm bắt đầu của phần tử đến giữa phần tử cha, sau đó sử dụng transform để dịch chuyển ngược lại một nửa chiều rộng và chiều cao của chính nó, đặt nó hoàn hảo vào giữa.

4. Flexbox (Rất Khuyến Khích)

Flexbox là một mô-đun mạnh mẽ và linh hoạt để bố cục, giúp việc căn giữa trở nên cực kỳ đơn giản.

.flex-container {
  display: flex;
  justify-content: center; /* Căn giữa theo chiều ngang */
  align-items: center;     /* Căn giữa theo chiều dọc */
  height: 300px;           /* Cần có chiều cao để căn dọc hoạt động */
  background-color: lightgreen;
}

.flex-item {
  width: 100px;
  height: 50px;
  background-color: yellow;
}

Chỉ cần đặt display: flex cho phần tử cha, sau đó sử dụng justify-content: center để căn ngang và align-items: center để căn dọc. Đây thường là phương pháp được ưa chuộng nhất cho các bố cục hiện đại.