Dokumentasi CSS interaktif: Div di Tengah

Q: Bagaimana cara membuat div di tengah secara horizontal dan vertikal?

Jadikan induknya grid dan tengahkan isinya: .parent { display: grid; place-items: center; }. Versi flexbox-nya adalah display: flex; justify-content: center; align-items: center;. Dengan cara mana pun, induknya butuh tinggi yang lebih besar dari div.

Q: Bagaimana cara membuat div di tengah secara horizontal saja?

Beri lebar dan margin kiri kanan otomatis: .box { width: 300px; margin: 0 auto; } (atau max-width untuk blok yang responsif). margin-inline: auto adalah hal yang sama dalam properti logis.

Q: Apa cara paling mudah membuat div di tengah?

display: grid; place-items: center; pada induknya: dua deklarasi, kedua sumbu, anak berukuran berapa pun. Pakai flexbox jika induknya juga menata item lain dalam satu baris.

Q: Bagaimana cara membuat teks di tengah div?

Pakai text-align: center pada div untuk teks dan konten inline. Menengahkan div itu sendiri dan menengahkan teks di dalamnya adalah dua pekerjaan yang berbeda.

Jawaban singkatnya

Untuk menengahkan div secara horizontal dan vertikal di dalam induknya, jadikan induknya grid dan tengahkan isinya:

.parent {
  display: grid;
  place-items: center;
  min-height: 200px; /* the parent needs room to center in */
}

Cara ini berfungsi untuk anak berukuran berapa pun dan tidak butuh apa-apa pada anaknya. Di bawah ini ada enam metode berdampingan. Setiap kotak mengukur dirinya sendiri setelah tampil dan mencetak seberapa jauh titik tengahnya dari titik tengah induk:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Six ways to center</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 12px; margin: 8px; }
    .grid-of-demos { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; }
    .stage { height: 130px; background: #e5e7eb; border: 1px solid #9ca3af; }
    .box { width: 100px; padding: 8px; background: #2563eb; color: white; text-align: center; }
    p { margin: 4px 0 0; }

    .flex { display: flex; justify-content: center; align-items: center; }
    .grid { display: grid; place-items: center; }
    .auto { display: flex; }
    .auto .box { margin: auto; }
    .abs { position: relative; }
    .abs .box { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
    .inset { position: relative; }
    .inset .box { position: absolute; inset: 0; margin: auto; height: 20px; }
    .content { align-content: center; }
    .content .box { margin-inline: auto; }
  </style>
</head>
<body>
  <div class="grid-of-demos">
    <div><div class="stage flex"><div class="box">flex</div></div><p></p></div>
    <div><div class="stage grid"><div class="box">grid</div></div><p></p></div>
    <div><div class="stage auto"><div class="box">margin: auto</div></div><p></p></div>
    <div><div class="stage abs"><div class="box">absolute</div></div><p></p></div>
    <div><div class="stage inset"><div class="box">inset: 0</div></div><p></p></div>
    <div><div class="stage content"><div class="box">align-content</div></div><p></p></div>
  </div>
  <script>
    document.querySelectorAll('.stage').forEach((stage) => {
      const s = stage.getBoundingClientRect();
      const b = stage.querySelector('.box').getBoundingClientRect();
      const dx = (b.left + b.width / 2) - (s.left + s.width / 2);
      const dy = (b.top + b.height / 2) - (s.top + s.height / 2);
      stage.nextElementSibling.textContent =
        'off center: x ' + Math.round(dx) + 'px, y ' + Math.round(dy) + 'px';
    });
  </script>
</body>
</html>

Keenamnya melaporkan 0px di kedua sumbu (border 1px pada panggungnya sama di setiap sisi, jadi tidak menggeser titik tengah). Ubah lebar atau teks sebuah kotak lalu jalankan lagi: metode yang tidak bergantung pada ukuran tetap akan tetap di 0.

Metode mana yang dipakai

Metode	Menengahkan	Anak butuh ukuran tetap?	Paling cocok untuk
Grid `place-items: center`	Kedua sumbu	Tidak	Pilihan default: satu anak di dalam kotak
Flexbox `justify-content` + `align-items`	Kedua sumbu	Tidak	Satu baris atau kolom item, ditengahkan sebagai kelompok
`margin: auto` di induk flex atau grid	Kedua sumbu	Tidak	Menengahkan satu item sementara saudaranya ditata dengan cara lain
`margin: 0 auto`	Horizontal saja	`width` atau `max-width`	Wadah halaman, artikel, form di alur normal
Absolute + `translate(-50%, -50%)`	Kedua sumbu	Tidak	Overlay, badge, dan modal di atas konten lain
Absolute + `inset: 0; margin: auto`	Kedua sumbu	Ya, lebar dan tinggi	Dialog berukuran tetap
`align-content: center` pada block	Vertikal	Tidak	Penengahan vertikal tanpa mengubah display induknya

Metode 1: flexbox

Flexbox menengahkan di dua sumbu dengan dua properti. justify-content mengurus sumbu utama (horizontal pada baris), dan align-items mengurus sumbu silang:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Center with flexbox</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    .parent {
      display: flex;
      justify-content: center; /* horizontal */
      align-items: center;     /* vertical */
      gap: 8px;
      height: 180px;
      background: #e5e7eb;
    }
    .child { padding: 12px 16px; background: #16a34a; color: white; }
  </style>
</head>
<body>
  <div class="parent" id="parent">
    <div class="child">One</div>
    <div class="child">Two</div>
    <div class="child">Three</div>
  </div>
</body>
</html>

Dengan beberapa anak, flexbox menengahkan mereka sebagai satu kelompok sambil tetap dalam satu baris. Di sinilah flexbox lebih unggul dari grid, yang akan menumpuk ketiga item dalam satu kolom di tengah. Halaman justify-content membahas setiap nilai perataan.

Metode 2: grid

place-items: center adalah singkatan dari align-items: center ditambah justify-items: center. Pada grid container dengan satu anak, properti ini menengahkan anak itu ke dua arah:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Center with grid</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    .parent {
      display: grid;
      place-items: center;
      min-height: 180px;
      background: #e5e7eb;
    }
    .card { max-width: 220px; padding: 16px; background: white; border: 2px solid #2563eb; border-radius: 8px; }
  </style>
</head>
<body>
  <div class="parent" id="parent">
    <div class="card" id="card">A card of any size, centered by its parent.</div>
  </div>
</body>
</html>

Memakai min-height alih-alih height membuat induk bisa membesar jika kartunya lebih tinggi dari 180px, bukannya kartu meluber keluar.

Metode 3: margin: 0 auto (horizontal)

Elemen block dengan lebar yang lebih kecil dari wadahnya bisa ditengahkan secara horizontal dengan margin samping otomatis. Browser membagi ruang kosong sama rata ke dua sisi:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>margin auto</title>
  <style>
    body { font-family: system-ui, sans-serif; margin: 0; }
    .page {
      max-width: 360px;
      margin: 0 auto;          /* same as margin-inline: auto */
      padding: 16px;
      background: #fef3c7; border: 2px solid #f59e0b;
    }
    .no-width { margin: 12px auto 0; padding: 16px; background: #fee2e2; border: 2px solid #dc2626; }
  </style>
</head>
<body>
  <div class="page" id="page">max-width: 360px and margin: 0 auto</div>
  <div class="no-width" id="nowidth">margin: auto without a width: nothing to center</div>
</body>
</html>

Kotak kedua mengisi seluruh lebar, jadi tidak ada ruang kosong dan tidak ada yang bergeser. Itulah alasan umum margin: 0 auto "tidak berfungsi". Cara ini juga hanya menengahkan secara horizontal di alur normal; margin vertikal auto menjadi 0 di sana. Tetapi di dalam induk flex atau grid, margin: auto menengahkan ke dua arah, yaitu kotak ketiga di perbandingan di atas.

Metode 4: posisi absolute dan transform

Saat elemen harus berada di atas konten lain (badge di atas foto, modal di atas halaman), posisikan secara absolute di 50% lalu tarik kembali sebesar setengah ukurannya sendiri:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Absolute centering</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    .photo {
      position: relative;      /* the reference box */
      height: 180px;
      background: linear-gradient(135deg, #bfdbfe, #1e3a8a);
    }
    .play {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      padding: 12px 20px;
      background: white; border-radius: 999px; font-weight: 700;
    }
  </style>
</head>
<body>
  <div class="photo" id="photo">
    <div class="play" id="play">Play</div>
  </div>
</body>
</html>

top: 50%; left: 50% menaruh pojok kiri atas elemen di titik tengah. Persentase di dalam translate() mengacu pada ukuran elemen itu sendiri, jadi -50% menggesernya kembali sebesar setengah lebar dan tingginya, berapa pun ukurannya. Induknya harus diposisikan (position: relative), kalau tidak elemen akan ditengahkan di halaman. Pemosisian dibahas di halaman position.

Variasi untuk elemen yang ukurannya diketahui: position: absolute; inset: 0; margin: auto; ditambah width dan height. Margin otomatis membagi ruang di keempat sisi.

Metode 5: align-content pada block biasa

align-content: center sekarang juga berfungsi pada block container biasa, tidak hanya flex dan grid. Properti ini menengahkan konten secara vertikal tanpa mengubah cara anak-anaknya ditata:

.parent {
  min-height: 200px;
  align-content: center;   /* vertical centering, still display: block */
}
.child {
  max-width: 300px;
  margin-inline: auto;     /* horizontal centering */
}

Properti ini didukung di Chrome, Firefox, dan Safari versi saat ini. Browser lama mengabaikannya, jadi pakai grid jika kamu harus mendukung browser lama.

Menengahkan di seluruh layar

Untuk menengahkan dialog di viewport tanpa terpengaruh scroll, gabungkan lapisan layar penuh yang fixed dengan grid:

.overlay {
  position: fixed;
  inset: 0;                     /* covers the viewport */
  display: grid;
  place-items: center;
  background: rgb(0 0 0 / 50%);
}

Untuk menengahkan konten seluruh halaman secara vertikal, pakai min-height: 100dvh pada induknya, bukan 100vh: di ponsel, 100vh ikut menghitung area di belakang toolbar browser, sehingga "tengah"-nya terletak terlalu rendah.

Menengahkan teks adalah pekerjaan lain

Semua cara di atas menengahkan kotak. Untuk menengahkan teks di dalam kotak, pakai text-align: center padanya, seperti yang ditunjukkan di halaman teks rata tengah HTML. Sering kali kamu butuh keduanya: grid untuk menengahkan kartu, dan text-align untuk menengahkan baris-baris di dalamnya.

Kesalahan umum

Induk tanpa tinggi. Penengahan vertikal butuh ruang kosong; induk yang menyusut mengikuti isinya tidak punya ruang itu.
margin: 0 auto pada block selebar penuh. Beri width atau max-width lebih dulu.
margin: auto untuk menengahkan vertikal di alur normal. Margin auto vertikal bernilai 0 di sana; pakai flex atau grid.
Penengahan absolute tanpa induk yang diposisikan. Elemen ditengahkan di halaman, bukan di kotak.
align-items: center pada anak. Properti perataan ditaruh di induk (flex atau grid container), kecuali margin: auto dan align-self.
text-align: center untuk menengahkan block. Properti ini menengahkan konten inline (teks, gambar, anak inline-block), bukan anak berupa block.

Pertanyaan yang sering diajukan

Bagaimana cara membuat div di tengah secara horizontal dan vertikal?

Jadikan induknya grid dan tengahkan isinya: .parent { display: grid; place-items: center; }. Versi flexbox-nya adalah display: flex; justify-content: center; align-items: center;. Dengan cara mana pun, induknya butuh tinggi yang lebih besar dari div.

Bagaimana cara membuat div di tengah secara horizontal saja?

Beri lebar dan margin kiri kanan otomatis: .box { width: 300px; margin: 0 auto; } (atau max-width untuk blok yang responsif). margin-inline: auto adalah hal yang sama dalam properti logis.

Kenapa margin: 0 auto tidak membuat div saya ke tengah?

Div itu tidak punya lebar yang lebih kecil dari wadahnya, jadi tidak ada ruang kosong untuk dibagi (secara default, sebuah block mengisi lebar penuh). Atur width atau max-width. Cara ini juga tidak berpengaruh pada elemen inline dan tidak pernah menengahkan secara vertikal di alur normal.

Kenapa div saya tidak mau ke tengah secara vertikal?

Tinggi induknya hanya setinggi isinya, jadi tidak ada ruang lebih untuk menengahkan. Beri induk sebuah tinggi (atau min-height), lalu pakai penengahan dengan grid atau flexbox.

Apa cara paling mudah membuat div di tengah?

display: grid; place-items: center; pada induknya: dua deklarasi, kedua sumbu, anak berukuran berapa pun. Pakai flexbox jika induknya juga menata item lain dalam satu baris.

Bagaimana cara membuat teks di tengah div?

Pakai text-align: center pada div untuk teks dan konten inline. Menengahkan div itu sendiri dan menengahkan teks di dalamnya adalah dua pekerjaan yang berbeda.

Konsep terkait

Cara Membuat Div di Tengah dengan CSS: Semua Metode