Titik Tengah yang Sempurna

Termasuk bagian Menata dengan CSS dalam perjalanan HTML di Coddy. Pelajaran 48 dari 76.

Dalam CSS, mencapai "pusat yang sempurna", yaitu menempatkan elemen tepat di tengah secara horizontal dan vertikal di dalam elemen induknya, merupakan tantangan tata letak yang umum. Flexbox menyediakan solusi yang elegan dan mudah untuk masalah ini. Dengan menggabungkan properti justify-content dan align-items, kamu dapat dengan mudah menempatkan elemen anak tepat di tengah kontainer flex-nya, terlepas dari ukuran elemen anak atau induknya.

Berikut cara membuat elemen tepat di tengah menggunakan Flexbox:

.container {
    display: flex; /* Jadikan elemen induk sebagai kontainer flex */
    justify-content: center; /* Posisikan elemen anak di tengah secara horizontal pada sumbu utama */
    align-items: center; /* Posisikan elemen anak di tengah secara vertikal pada sumbu silang */
}

Agar teknik ini bekerja dengan efektif, pastikan tinggi kontainer flex sudah ditentukan. Jika tinggi kontainer tidak ditetapkan secara eksplisit, tingginya hanya akan sebesar kontennya, sehingga perataan vertikal mungkin tidak terlihat.

Berikut contoh cara menggunakan teknik ini dalam HTML:

<div class="container">
    <div class="child">This is centered</div>
</div>

.container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 300px; /* Tetapkan tinggi tertentu untuk container */
    border: 1px solid black; /* Opsional: Tambahkan garis tepi agar lebih mudah dilihat */
}

.child {
    padding: 20px;
    border: 1px solid red;
}

Dalam contoh ini, elemen .container memiliki tinggi 300px, dan elemen .child akan berada tepat di tengah, baik secara horizontal maupun vertikal.

Tantangan

Mudah

Kamu diberi dokumen HTML dengan div induk (<div>) yang berisi div anak (<div>). Tugasmu adalah menggunakan Flexbox untuk memusatkan div anak dengan sempurna di dalam div induk. Ikuti langkah-langkah berikut:

Tulis aturan CSS yang menargetkan elemen <div> dengan class parent.
Atur properti display pada elemen .parent menjadi flex agar elemen tersebut menjadi kontainer flex.
Atur properti justify-content pada elemen .parent menjadi center untuk memusatkan elemen anak secara horizontal.
Atur properti align-items pada elemen .parent menjadi center untuk memusatkan elemen anak secara vertikal.
Beri elemen .parent tinggi sebesar 200px agar pemusatan vertikal terlihat.

Coba sendiri

<html>
<head>
    <title>The Perfect Center</title>
    <style>
        /* Write CSS rules here */
    </style>
</head>
<body>
    <div class="parent">
        <div class="child">Center Me</div>
    </div>
</body>
</html>