Flexbox

Pelajaran 5 dari 9 dalam kursus Cara Memusatkan Div atau Teks dengan CSS di Coddy.

Mungkin cara terbaik untuk memusatkan div adalah dengan Flexbox (atau apa pun!)

Flexbox adalah metode responsif dan tidak memerlukan perhitungan margin atau posisi.

Untuk menggunakan flexbox, tambahkan display: flex; pada div induk. Ini akan menjadikan div induk sebagai flexbox. Untuk memusatkan semua yang ada di dalam induk, gunakan align-items: center; dan justify-content: center;

Secara keseluruhan,

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

Perhatikan: kamu tidak perlu menambahkan apa pun ke div anak!

Tantangan

Mudah

Pusatkan div anak menggunakan flexbox.

Coba sendiri

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="styles.css">
</head>
    <body>
        <div id="parent">
            <div id="child"/>
        </div>
    </body>
</html>

Semua pelajaran di Cara Memusatkan Div atau Teks dengan CSS

1Pengantar

Apa itu kursus ini?

2Memusatkan Div

Margin Otomatis Posisi Absolut: Translate Posisi Absolut: MarginFlexboxTantangan Ulasan

3Tengahkan Teks

Perataan Teks Flexbox Tantangan Akhir

Latihan sendiri: Playground Web