Margin auto

Bài học 2 trên 9 trong khóa học Cách căn giữa div hoặc văn bản bằng CSS của Coddy.

Để căn giữa một div theo chiều ngang, bạn có thể dùng thuộc tính margin với giá trị auto.

Giá trị auto sẽ chiếm toàn bộ khoảng trống còn lại theo chiều ngang.

margin: auto;

Bạn cũng có thể dùng margin-left: auto; và margin-right: auto;!

Lưu ý: cách này không căn giữa theo chiều dọc!

Thử thách

Dễ

Dùng những gì bạn đã học để căn giữa hộp màu xanh theo chiều ngang bên trong hộp màu đỏ.

Hãy chú ý, giá trị của margin-left sẽ là 75px thay vì auto. Vì sao?

Tự làm thử

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="styles.css">
</head>
    <body>
        <div id="red-box">
            <div id="blue-box" />
        </div>
    </body>
</html>

Tất cả bài học trong Cách căn giữa div hoặc văn bản bằng CSS

1Giới thiệu

Khóa học này là gì?

2Căn giữa thẻ div

Margin autoĐịnh vị tuyệt đối bằng translate Định vị tuyệt đối bằng margin Flexbox Thử thách ôn tập

3Căn giữa văn bản

Căn chỉnh văn bản Hộp Flex Thử thách cuối cùng

Tự luyện tập: Playground Web