Cara memusatkan div menggunakan grid css

kaedah grid lima CSS untuk memusatkan div

secara mendatar dan menegak

Artikel ini meneroka lima teknik grid CSS untuk memusatkan div secara mendatar dan menegak. Kaedah ini boleh digunakan untuk mana -mana elemen HTML. Kami juga akan menyentuh secara ringkas ke atas Flexbox dan berpusat berasaskan transformasi, yang telah dilindungi di tempat lain.

Takeaways utama:

• CSS Grid menawarkan lima cara yang cekap untuk memusatkan div: place-self, place-items, place-content, margin auto, dan kawasan grid.
• place-self Pusat item grid individu, meninggalkan item lain bebas untuk meletakkan kedudukan secara berbeza. Ia menggabungkan justify-self (mendatar) dan align-self (menegak).
• place-items terpakai pada bekas grid, ideal apabila semua item memerlukan penempatan yang sama. Ini tersendiri untuk justify-items dan align-items.
• place-content menyelaraskan kandungan kontena grid keseluruhan, merawat semua item sebagai satu kumpulan. Ia menggabungkan justify-content dan align-content.
• margin auto Biarkan penyemak imbas mengira dan mengedarkan ruang sekitar, memusatkan div dalam sel gridnya.

Persediaan:

kita akan bermula dengan bekas dan elemen kotak mudah (div) untuk demonstrasi. Inilah HTML:

<article>
  <div></div>
</article>

dan CSS awal:

article {
  width: 100%;
  min-height: 100vh;
  background: black;
  display: grid;
}

div {
  width: 200px;
  background: yellow;
  height: 100px;
}

Semua contoh menggunakan

, mewujudkan elemen display: grid sebagai bekas grid. Bekas dibuat luas dan tinggi untuk menyediakan ruang yang mencukupi. article

kaedah pusat:

1. : place-self Ini mudah memusatkan item grid dalam sel.

article {
  display: grid;
}

div {
  place-self: center;
}

[codepen demo: berpusat menggunakan grid dan tempat-diri] (pautan ke codepen)

adalah singkat untuk place-self dan justify-self. Eksperimen dengan sifat individu ini dalam demo Codepen. Ia adalah yang terbaik untuk memusatkan item individu sambil membenarkan orang lain diposisikan secara berbeza. align-self

2. : place-items Pusat ini semua item grid dalam sel mereka.

article {
  display: grid;
  place-items: center;
}

[codepen demo: pusat elemen dengan grid css dan item tempat] (pautan ke codepen)

adalah singkat untuk place-items dan justify-items. Tambahkan lebih banyak Divs ke Demo Codepen untuk melihat bagaimana mereka semua berpusat. align-items

3. place-content: Pusat keseluruhan kandungan grid sebagai satu kumpulan.

<article>
  <div></div>
</article>

[codepen demo: pusat elemen dengan grid css dan kandungan tempat] (pautan ke codepen)

place-content adalah singkat untuk justify-content dan align-content. Eksperimen dengan nilai space-around dan space-evenly sebagai alternatif untuk center.

4. margin auto: Ini menggunakan pengiraan margin automatik untuk pusat.

article {
  width: 100%;
  min-height: 100vh;
  background: black;
  display: grid;
}

div {
  width: 200px;
  background: yellow;
  height: 100px;
}

[codepen demo: pusat elemen dengan grid css dan margin auto] (pautan ke codepen)

Teknik mudah ini membolehkan penyemak imbas mengendalikan jarak.

Kawasan grid
5. : Kaedah ini menggunakan grid berbilang/lajur untuk penempatan yang tepat.

article {
  display: grid;
}

div {
  place-self: center;
}

[codepen demo: pusat div dengan grid css] (pautan ke codepen)

secara alternatif, menggunakan kawasan grid yang dinamakan:

article {
  display: grid;
  place-items: center;
}

[codepen demo: pusat div dengan grid css menggunakan kawasan bernama] (pautan ke codepen)

Kesimpulan:

Semua kaedah berkesan memusatkan div.

dan margin auto adalah mudah untuk penargetan elemen langsung. Pilih kaedah yang paling sesuai dengan kerumitan dan keperluan susun atur anda. Ingat, teknik ini berfungsi pada unsur -unsur di luar Divs. Contohnya menggunakan div kosong, tetapi menambah kandungan mengekalkan pusat. place-self

(bahagian Soalan Lazim dikeluarkan kerana ia sebahagian besarnya berulang dan jawapan soalan telah secara tersirat diliputi dalam artikel.)

Atas ialah kandungan terperinci Cara memusatkan div menggunakan grid css. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!