Cara Center Div: Panduan Lengkap CSS 2024

Masalah Abadi: Centering in CSS

Kalau ada satu pertanyaan yang bisa menyatukan seluruh komunitas web developer di dunia, itu adalah: "Gimana cara center div?". Pertanyaan ini sudah ada sejak CSS pertama kali diperkenalkan, dan sampai sekarang masih jadi meme favorit di kalangan developer. Tapi sebenarnya, di 2024 ini centering sudah jauh lebih mudah dibanding era IE6.

Metode Modern: Flexbox

Cara paling simpel dan reliable untuk centering di 2024 adalah menggunakan Flexbox. Cukup 3 baris CSS dan div kamu akan centered secara horizontal dan vertikal:

/* Centering dengan Flexbox - Cara paling clean */
.container {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
}

/* Atau pakai Grid - bahkan lebih singkat */
.container {
    display: grid;
    place-items: center;
    min-height: 100vh;
}

Dengan CSS Grid, kamu bahkan bisa melakukannya dalam 2 baris saja dengan place-items: center. Tidak perlu lagi margin: 0 auto, position: absolute dengan transform: translate(-50%, -50%), atau trik-trik hacky lainnya. Welcome to modern CSS! 🎉

Jurnal Berelasi