Cách căn giữa website theo chiều ngang (horizontally) với CSS

Giới thiệu

Căn giữa nội dung trang web theo chiều ngang là kỹ thuật cơ bản nhưng cực kỳ quan trọng để tạo layout cân đối, chuyên nghiệp trên màn hình rộng.

Phương pháp kinh điển: margin: auto

Cách đơn giản, hiệu quả nhất là đặt max-width cho container và margin: auto:

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <style>
        body {
            background: rgb(255, 238, 0);
            font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
        }
        .main {
            max-width: 600px;
            margin: auto;           /* Căn giữa ngang */
            background: rgb(70, 32, 240);
            color: white;
            padding: 20px;
            border-radius: 8px;
        }
        p { font-size: 18px; line-height: 1.6; }
    </style>
</head>
<body>
    <div class="main">
        <h1>Center website horizontally example</h1>
        <p>Nội dung trang web được căn giữa hoàn hảo. Khi màn hình rộng hơn 600px, hai bên sẽ có khoảng trống đều nhau.</p>
    </div>
</body>
</html>

Tại sao dùng max-width thay vì width?

• width: 600px: Container luôn 600px, trên mobile (< 600px) sẽ tràn ra ngoài, cần scroll ngang.
• max-width: 600px: Container tối đa 600px, trên màn hình nhỏ sẽ co lại vừa khung nhìn (kết hợp width: 100% ngầm định).

Các phương pháp khác

1. Flexbox trên body

body {
    display: flex;
    justify-content: center;
    min-height: 100vh;
    margin: 0;
}
.main { width: 100%; max-width: 600px; }

Ưu: Căn giữa cả ngang và dọc dễ dàng. Nhược: Cần reset margin body.

2. CSS Grid

body {
    display: grid;
    place-items: center;
    min-height: 100vh;
    margin: 0;
}

Code ngắn gọn nhất, hỗ trợ căn giữa 2 chiều.

3. Position absolute + transform (cũ)

.main {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    max-width: 600px;
}

Phức tạp hơn, ít dùng cho layout toàn trang.

Best Practice hiện nay

Kết hợp max-width + margin: auto cho container chính, dùng Flexbox/Grid cho các thành phần bên trong. Cách này:

• Tương thích mọi trình duyệt (IE11+).
• Responsive tự nhiên không cần media query cho container.
• Dễ bảo trì, code dễ đọc.