⭐ 0
🔍
Teks Gambar PDF & Dokumen Audio Musik Elektronika Waktu Utilitas Validator Esoterik Game

Cara Memusatkan Div di CSS (Flexbox)

Buat tata letak flexbox CSS secara visual: flex-direction, justify-content, align-items, flex-wrap dan gap pada container, ditambah flex-grow per-child, flex-shrink dan flex-basis, semuanya dengan pratinjau langsung dan CSS yang dapat disalin.

Memproses... 0%

Hasil

Berikut adalah jawaban langsung untuk pertanyaan yang paling sering diajukan di CSS: untuk memusatkan div, letakkan display: flex, justify-content: center dan align-items: center pada induknya. Itu saja — tiga deklarasi pada wadah, dan anak tersebut duduk tepat di tengah wadah secara horizontal dan vertikal, dalam ukuran berapa pun. Halaman ini membuka generator yang sudah menerapkan kombinasi tersebut, jadi pratinjau di bawah menunjukkan generator sedang bekerja pada tiga kotak bernomor saat ini.

Sebelum flexbox, memusatkan div memerlukan peretasan: margin: 0 otomatis hanya terpusat secara horizontal dan hanya berfungsi pada blok dengan lebar tetap; pemusatan vertikal berarti posisi: absolut dengan margin negatif atau trik transformasi, keduanya rapuh saat konten diubah ukurannya. justify-content menangani sumbu utama dan align-items menangani sumbu silang — keduanya berpusat di kedua arah terlepas dari seberapa tinggi atau lebar anak tersebut, itulah sebabnya pasangan ini menjadi jawaban standar.

Seret kontrol apa pun ke bawah dan lihat tiga kotak pratinjau tetap berada di tengah saat wadah berubah bentuk, atau tambahkan celah di antara keduanya. Jika sudah benar, salin blok CSS di bagian bawah langsung ke stylesheet Anda — ini berjalan dengan cara yang sama di setiap browser modern, tidak diperlukan pustaka.

🛡️
Dieksekusi di Browser

File dan masukan Anda tidak pernah keluar dari perangkat ini. Pemrosesan berjalan sepenuhnya offline. 100% Aman.

Format & Aturan yang Diterima

  • Kontrol kontainer: flex-direction, justify-content, align-items, flex-wrap dan input gap dalam piksel, diterapkan langsung ke pratinjau.
  • Tiga kotak anak berkode warna secara default (tambahkan hingga delapan, hapus hingga dua), masing-masing dengan bidang pertumbuhan fleksibel, penyusutan fleksibel, dan basis fleksibel.
  • Blok CSS yang dapat disalin dengan aturan .flex-container ditambah satu aturan .flex-item-N per turunan yang memiliki properti fleksibel non-default.

Manfaat Utama

✓ Setiap kontrol kontainer dan pembaruan flex-grow, flex-shrink, dan flex-basis setiap anak, tiga kotak pratinjau bernomor aktif, sehingga Anda melihat dengan tepat apa yang dilakukan aturan flexbox Anda sebelum menyentuh stylesheet.
✓ Generator hanya mencetak aturan anak yang sebenarnya berbeda dari default CSS, sehingga kode yang disalin tetap pendek dan mudah dibaca alih-alih menyatakan ulang flex-grow: 0 di setiap kotak.
✓ Halaman preset menyelesaikan tata letak yang dicari orang berdasarkan nama: div tengah, bilah navigasi kiri-link-kanan logo, dan kolom fleksibel dengan lebar yang sama — buka satu dan alat sudah dikonfigurasi.

Kasus Penggunaan

  • • Dapatkan CSS yang tepat untuk memusatkan div secara horizontal dan vertikal dengan melihat konten justifikasi dan item penyelarasan berfungsi di kotak pratinjau langsung.
  • • Buat tata letak navbar kiri-logo, tautan-kanan dengan spasi-antara dan align-items: center, lalu salin CSS container langsung ke komponen header Anda.
  • • Bandingkan jarak antara, jarak sekitar, dan jarak rata secara berdampingan pada tiga kotak yang sama alih-alih menebak mana yang cocok dengan jarak yang Anda inginkan.