Cara Rata Tengah Elemen dengan Flexbox

Rata tengah yang geser saat lebar berubah biasanya masih memakai margin tetap. Flexbox menghitung sisa ruang sendiri. Ubah di editor.clincoo.buzz lalu cek di live preview.

Jadikan induk sebagai flex

Pasang display: flex pada elemen pembungkus, bukan pada anak yang ingin dipusatkan. justify-content: center menggeser di sumbu utama. align-items: center menggeser di sumbu silang. Keduanya bersama-sama memusatkan anak di kedua arah.

Perhatikan arah sumbu

flex-direction: column menukar sumbu. Setelah column, justify-content mengatur vertikal dan align-items mengatur horizontal. Kalau hanya satu sumbu yang pindah, cek properti mana yang kamu ubah.

Beri tinggi pada pembungkus

align-items tidak terlihat jika tinggi pembungkus sama dengan tinggi anak. Untuk hero, beri min-height, misalnya 60vh. Jangan rata tengah dengan position absolute kecuali elemen memang harus lepas dari alur dokumen.

Simpan CSS, muat ulang preview, lalu sempitkan lebar. Jika teks tetap di tengah saat satu kolom, Flexbox sudah benar. Grid lebih pas jika kamu meratakan beberapa sel sekaligus, bukan satu kotak.