← CSS15 / 62
Centering klasik dengan margin auto
Untuk memusatkan elemen block secara horizontal, dua hal harus ada bersamaan: lebar yang terbatas dan margin-inline: auto (atau margin: 0 auto). Tanpa width, elemen block sudah selebar penuh sehingga tidak ada ruang untuk dipusatkan — inilah kenapa margin: 0 auto sering 'tidak berefek'. Untuk memusatkan secara vertikal, margin auto tidak cukup — itu tugas Flexbox atau Grid yang kamu pelajari di modul berikutnya.
👀 Contoh dulu
/* TIDAK berefek: elemen sudah selebar penuh */
.a { margin: 0 auto; }
/* BERHASIL: ada batas lebar dulu */
.b { max-width: 400px; margin: 0 auto; }Hasilnya: .a tetap menempel di kiri, sedangkan .b berada di tengah dengan ruang seimbang di kedua sisi.
💡 auto berarti 'bagi ruang sisa secara rata'. Kalau tidak ada ruang sisa, tidak ada yang bisa dibagi.
📝 Sekarang giliranmu
Pusatkan .wadah dengan max-width: 300px dan margin: 0 auto.
Preview