Seni menengahkan elemen

Tiga cara menengah: teks, blok, dan segalanya.

Pahami konsepnya

Menengahkan legendaris sulit di CSS lama — lelucon berpuluh tahun — tapi tiga alat modern menuntaskannya. Kasus pertama: teks di dalam elemen. text-align: center untuk mendatar dan line-height setinggi kotaknya (atau padding simetris) untuk tegak — cukup untuk tombol dan badge satu baris.

Kasus kedua: blok berlebar tetap di tengah induk. margin: 0 auto — kiri-kanan auto membagi sisa ruang sama rata. Ini solusi klasik yang tetap sehat sampai kini untuk konten bertumpuk vertikal. Untuk menengahkan tegak blok di induk bertinggi tetap, pasangkan induk dengan display: flex dan align-items: center.

Kasus ketiga — senjata serba-bisa: induk flexbox tiga baris (display: flex; justify-content: center; align-items: center) menengahkan anak ke arah mana pun, ukuran apa pun, tanpa perhitungan. Alternatif sejawat untuk elemen ber-position absolute: left: 50%; top: 50%; transform: translate(-50%, -50%) — persen pada translate mengacu ukuran elemen sendiri, jadi pas tengah presisi. Pilih satu sesuai senjata favorit; semua sah.

Coba contoh kode

/* 1) teks */
.tombol {
  text-align: center;
  line-height: 44px;   /* = tinggi tombol */
}

/* 2) blok tetap */
.konten { width: 640px; margin: 0 auto; }

/* 3) serba-bisa */
.panggung {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
}

Tiga tingkat kesulitan tiga obat: teks cukup text-align + line-height; blok bertumpuk cukup margin auto; dan panggung flex tiga baris menengahkan apa pun di tengah layar — pola hero "coming soon" yang sering kamu lihat. Uji ketiganya di satu halaman yang sama.

Tengah presisi dengan transform

.induk { position: relative; height: 300px; }

.anak {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

left/top 50% menempatkan titik kiri-atas anak di tengah induk — belum pas tengah; translate(-50%, -50%) lalu menggeser anak kembali separuh ukurannya sendiri. Trik persen-vs-persen ini tetap menjadi resep modal dan tooltip yang menempel presisi.

Latihan singkat

Buat halaman "segera hadir" dengan logo sempurna di tengah layar (flex), modal ber-transform tengah, dan konten 640px margin auto.