Latihan 1 dari materi Flexbox: Alignment di CSS — praktek dengan editor kode interaktif, test case otomatis, dan hint terpandu. Langsung jalan di browser.
Kotak Tengah! masih nempel di pojok kiri atas kotak garis putus-putus. Taruh tepat di tengahnya, kiri-kanan dan atas-bawah.
Di rule .container yang sudah ada, tambahkan tiga deklarasi:
display: flex
justify-content: center, buat tengah kiri-kanan
align-items: center, buat tengah atas-bawah
Tinggi container (height: 300px) sudah ada, jadi kotaknya punya ruang buat turun ke tengah.
Hint
Yang pindah memang kotaknya, tapi yang diatur container-nya: dia yang menentukan di mana anak-anaknya berdiri.
Aktifkan flexbox dengan display: flex, lalu justify-content: center buat tengah kiri-kanan dan align-items: center buat tengah atas-bawah.
