Centered Container

Hampir tidak ada website yang menampilkan konten membentang selebar layar: baris teks yang terlalu panjang melelahkan dibaca karena mata harus melompat jauh saat pindah baris. Resep centered container menjadi fondasi hampir semua halaman — wadah dibatasi lebar maksimumnya, lalu ditempatkan di tengah layar. Resep ini hanya terdiri atas tiga deklarasi, yaitu max-width, margin-inline: auto, dan padding-inline, tetapi setiap deklarasi punya alasan teknis yang perlu dipahami sebelum dipakai. Kita bedah ketiganya dan membuktikan hasilnya lewat demo yang diuji otomatis.

Resep Dasar Wadah Terpusat #

Ketiga deklarasi berikut adalah keseluruhan resepnya. Wadah dibatasi lebarnya 960px, sisa ruang horizontal dibagi rata ke kedua margin, dan padding menjaga jarak minimal di layar sempit:

.wadah {
  max-width: 960px;
  margin-inline: auto;
  padding-inline: 24px;
}

HTML pendampingnya sederhana — satu pembungkus dan satu area isi:

<!DOCTYPE html>
<html lang="id">
<head>
  <meta charset="utf-8">
  <title>Centered Container</title>
  <style>
    * { box-sizing: border-box; margin: 0; }
    body { font-family: system-ui, sans-serif; background: rgb(248, 250, 252); }
    .wadah {
      max-width: 960px;
      margin-inline: auto;
      padding-inline: 24px;
    }
    .isi {
      background: rgb(255, 255, 255);
      border: 1px solid rgb(226, 232, 240);
      border-radius: 8px;
      padding: 24px;
    }
  </style>
</head>
<body>
  <div class="wadah">
    <div class="isi">
      <h1>Selamat datang</h1>
      <p>Konten halaman berada di dalam wadah 960px yang ditempatkan di tengah layar.</p>
    </div>
  </div>
</body>
</html>

Hasil di Browser:

Pada viewport 1280x720, wadah berhenti di lebar 960px dan menempel di
tengah: computed max-width 960px, margin-left 160px, margin-right 160px
— sisa ruang (1280 - 960) dibagi dua sama besar. Area isi di dalamnya
selebar 912px karena padding-inline 24px di setiap sisi (960 - 48).

Mari kita telaah tiga deklarasi resep tersebut:

1. max-width: 960px: wadah boleh menyusut mengikuti layar, tetapi tidak pernah melebihi 960px. Angka 960 adalah titik awal yang lazim; banyak website memakai 1024–1200px untuk aplikasi dan sekitar 65–75 karakter untuk kolom artikel.
2. margin-inline: auto: pada elemen block-level yang lebarnya lebih kecil dari induknya, nilai auto pada margin kiri dan kanan membagi ruang sisa secara sama besar. margin-inline adalah bentuk logical properties untuk margin-left dan margin-right sekaligus.
3. padding-inline: 24px: ketika layar lebih sempit dari 960px, wadah menyusut sampai menempel tepi jendela; padding mencegah teks menempel langsung ke tepi tersebut.

Kenapa Ketiga Deklarasi Diperlukan #

Menghapus salah satu deklarasi menghasilkan masalah yang berbeda. Tanpa max-width (lihat min-max-width-height ), wadah mengikuti lebar layar penuh sehingga paragraf bisa mencapai lebih dari 120 karakter per baris. Tanpa margin-inline: auto, wadah menempel ke tepi kiri layar karena elemen block-level secara bawaan memenuhi lebar induk ke arah kanan. Tanpa padding-inline, pengguna ponsel melihat teks menempel ke tepi jendela.

Kombinasi ketiganya juga aman berkat box-sizing: border-box (lihat box-sizing ): padding dihitung di dalam 960px, sehingga area isi menjadi 912px dan total lebar wadah tetap 960px.

Satu kekeliruan yang sering terjadi: menengahkan konten inline — teks, gambar, atau tautan — dengan margin auto. Margin auto hanya bekerja pada elemen block-level yang lebarnya lebih kecil dari induknya; untuk konten inline, gunakan text-align: center pada induknya. Sebaliknya, elemen yang lebarnya mengikuti isi tetap dapat ditenangkan dengan margin auto selama tetap block-level, misalnya width: fit-content pada sebuah kotak. Perlu diingat juga bahwa resep ini menengahkan secara horizontal saja; menengahkan sekaligus secara vertikal adalah persoalan lain yang dikerjakan dengan flexbox — contohnya ada pada chapter Flexbox Layout Patterns .

Variasi yang Sering Dipakai #

Varian ketiga memakai fungsi min() (lihat calc-min-max-clamp ) untuk memilih lebar terkecil antara 960px dan sisa layar, sehingga jarak 24px di kedua tepi tetap ada tanpa padding. Kedua pendekatan sama validnya; pilih satu dan gunakan secara konsisten di seluruh proyek.

Demo chapter ini memuat penanda uji otomatis yang memverifikasi max-width 960px, margin kiri-kanan 160px, padding-left 24px, serta lebar area isi 912px pada viewport 1280x720.