Flexbox

Bài học 5 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ó lẽ cách tốt nhất để căn giữa một div là dùng Flexbox (hoặc bất cứ thứ gì!)

Flexbox là một phương pháp thích ứng và không cần tính toán lề hay vị trí.

Để dùng flexbox, hãy thêm display: flex; vào div cha. Thao tác này sẽ biến div cha thành một flexbox. Để căn giữa mọi thứ bên trong div cha, hãy dùng align-items: center; và justify-content: center;

Tóm lại,

#parent {
	display: flex;
	align-items: center;
	justify-content: center;
}

Lưu ý: bạn không cần thêm gì vào div con!

Thử thách

Dễ

Căn giữa div con bằng flexbox.

Tự làm thử

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="styles.css">
</head>
    <body>
        <div id="parent">
            <div id="child"/>
        </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 marginFlexboxThử 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