Để căn giữa một div HTML theo chiều ngang bằng CSS rất dễ. Chúng ta có thể căn giữa bất kỳ phần tử nào theo chiều ngang bằng các cách sau.
Trước khi căn giữa một div theo chiều ngang, ta cần tạo một div có kích thước cố định. Chúng ta đã thêm một đường viền cho div để việc căn giữa được nhìn thấy rõ hơn. Đặt chiều rộng của container chính thành 100% để div có thể di chuyển trong container đó.
HTML<!DOCTYPE html>
<html>
<head>
<title>Centerin div Horizontally in CSS</title>
<style>
div {
width: 300px;
border: 2px solid black;
}
</style>
</head>
<body>
<article class="container">
<div>
<h1>Geeksforgeeks</h1>
<p>Horizontally Center Div</p>
</div>
</article>
</body>
</html>
Căn giữa div với thuộc tính margin auto
Phương pháp này cho phép trình duyệt tính toán không gian có sẵn rồi đặt div vào giữa. Trong trường hợp này bạn phải giữ cho chiều rộng div nhỏ hơn chiều rộng viewport.
Ví dụ:
HTML<!DOCTYPE html>
<html>
<head>
<title>Centerin div Horizontally in CSS</title>
<style>
div {
width: 300px;
margin: auto;
border: 2px solid black;
}
</style>
</head>
<body>
<article class="container">
<div>
<h1>Geeksforgeeks</h1>
<p>Horizontally Center Div</p>
</div>
</article>
</body>
</html>
Đầu ra:
Giải thích:
Trong ví dụ này chúng ta đã tận dụng khả năng của trình duyệt bằng thuộc tính CSS margin. Chúng ta đặt giá trị margin thành auto để trình duyệt tự điều chỉnh. Div được đặt vào giữa viewport nhờ không gian trống.
Lưu ý: Đối với Microsoft Edge & Internet Explorer, giá trị auto không được hỗ trợ trong chế độ quirks.