⭐ 0
🔍
Teks Imej PDF & Dokumen Audio Muzik elektronik Masa Utiliti Pengesah Esoterik Permainan

Cara Memusatkan Div dalam CSS (Flexbox)

Bina reka letak flexbox CSS secara visual: flex-direction, justify-content, align-item, flex-wrap dan gap pada bekas, ditambah dengan flex-grow setiap kanak-kanak, flex-shrink dan flex-basis, semuanya dengan pratonton langsung dan CSS yang boleh disalin.

Memproses... 0%

Hasilnya

Berikut ialah jawapan langsung kepada soalan yang paling sering ditanya dalam CSS: untuk memusatkan div, meletakkan paparan: flex, justify-content: center dan align-item: center pada induknya. Itu sahaja - tiga pengisytiharan pada bekas, dan kanak-kanak itu duduk berpusat dengan sempurna secara mendatar dan menegak di dalamnya, pada sebarang saiz. Halaman ini membuka penjana dengan tepat gabungan itu telah digunakan, jadi pratonton di bawah menunjukkan ia berfungsi pada tiga kotak bernombor sekarang.

Sebelum flexbox, memusatkan div memerlukan penggodaman: margin: 0 auto hanya berpusat secara mendatar dan hanya berfungsi pada blok lebar tetap; pemusatan menegak bermaksud kedudukan: mutlak dengan margin negatif atau helah transformasi, kedua-duanya rapuh apabila kandungan berubah saiz. justify-content mengendalikan paksi utama dan align-item mengendalikan paksi silang — bersama-sama mereka berpusat di kedua-dua arah tanpa mengira ketinggian atau lebar kanak-kanak itu, itulah sebabnya pasangan ini menjadi jawapan standard.

Seret mana-mana kawalan di bawah dan tonton tiga kotak pratonton kekal di tengah-tengah apabila bekas berubah bentuk atau tambahkan jurang antaranya. Apabila ia kelihatan betul, salin blok CSS di bahagian bawah terus ke dalam helaian gaya anda — ia berjalan dengan cara yang sama dalam setiap penyemak imbas moden, tiada perpustakaan diperlukan.

🛡️
Dilaksanakan dalam Pelayar

Fail dan input anda tidak pernah meninggalkan peranti ini. Pemprosesan berjalan sepenuhnya di luar talian. 100% Selamat.

Format & Peraturan yang Diterima

  • Kawalan bekas: flex-direction, justify-content, align-item, flex-wrap dan input jurang dalam piksel, digunakan secara langsung pada pratonton.
  • Tiga kotak kanak-kanak berkod warna secara lalai (tambah sehingga lapan, keluarkan ke bawah kepada dua), setiap satu dengan medan flex-grow, flex-shrink dan flex-asas sendiri.
  • Blok CSS boleh disalin dengan peraturan .flex-container ditambah satu peraturan .flex-item-N bagi setiap kanak-kanak yang mempunyai sifat flex bukan lalai.

Faedah Utama

✓ Setiap kawalan bekas dan pertumbuhan fleksibel, pengecutan fleksibel dan asas fleksibel setiap kanak-kanak mengemas kini tiga kotak pratonton bernombor secara langsung, jadi anda melihat dengan tepat apa yang dilakukan oleh peraturan kotak fleksibel anda sebelum menyentuh helaian gaya.
✓ Penjana hanya mencetak peraturan kanak-kanak yang sebenarnya berbeza daripada lalai CSS, jadi kod yang disalin kekal pendek dan boleh dibaca dan bukannya menyatakan semula flex-grow: 0 pada setiap kotak.
✓ Halaman pratetap menyelesaikan reka letak yang dicari oleh orang mengikut nama: memusatkan div, bar navigasi kanan pautan kiri logo dan lajur fleksibel yang sama lebar — buka satu dan alat sudah dikonfigurasikan.

Kes Penggunaan

  • • Dapatkan CSS yang tepat untuk memusatkan div secara mendatar dan menegak dengan menonton justify-content dan align-item berfungsi pada kotak pratonton langsung.
  • • Bina reka letak navbar logo-kiri, pautan-kanan dengan ruang-antara dan jajar-item: tengah, kemudian salin CSS bekas terus ke dalam komponen pengepala anda.
  • • Bandingkan ruang-antara, ruang-keliling dan ruang-sekata bersebelahan pada tiga kotak yang sama dan bukannya meneka yang mana satu sepadan dengan jarak yang anda inginkan.