Kandungan pusat menegak boleh dilaksanakan dalam CSS dalam pelbagai cara, cara yang paling langsung adalah menggunakan Flexbox. 1. Gunakan Flexbox: dengan menetapkan bekas untuk memaparkan: Flex dan bersempena dengan item Align: pusat, pusat menegak elemen kanak-kanak dapat dicapai dengan mudah; 2. Gabungan kedudukan dan transformasi mutlak: Sesuai untuk elemen kedudukan mutlak, dengan menetapkan atas dan kiri hingga 50%dan kemudian menggunakan translate (-50%, -50%) untuk mencapai pusat; 3. CSS Grid: Melalui Paparan: Grid dan Tempat-Item: Pusat, Pusat Horizontal dan Vertikal boleh dicapai pada masa yang sama. Jika hanya pusat menegak diperlukan, gunakan item Align-item: pusat. Kaedah ini serasi dengan pelayar moden dan sangat praktikal.

Memusatkan kandungan secara menegak dalam CSS boleh menjadi rumit, terutamanya kerana ia bertindak secara berbeza bergantung pada susun atur dan konteks. Tetapi terdapat beberapa teknik yang boleh dipercayai yang berfungsi dengan baik di seluruh pelayar moden.

Flexbox adalah kaedah yang paling mudah

Menggunakan Flexbox adalah cara yang paling mudah dan paling biasa untuk memusatkan sesuatu secara menegak. Apa yang anda perlukan adalah bekas dengan display: flex , dan kemudian gunakan align-items: center . Ini memusatkan kandungan secara menegak di dalam bekas.

Contohnya:

 .container {
  Paparan: Flex;
  Align-item: pusat;
  Ketinggian: 100px;
}

Ini berfungsi hebat untuk perkara seperti butang, item NAV, atau mana-mana unsur peringkat blok di mana anda mahu kandungan berpusat tanpa mengira ketinggiannya.

Satu perkara yang perlu diingat: Ini memberi kesan kepada semua item flex di dalam bekas, jadi jika anda hanya mahu memusatkan satu item tertentu, pastikan ia terpencil dalam pembungkusnya sendiri.

Kedudukan mutlak dengan transformasi

Jika anda berurusan dengan elemen yang benar -benar diposisikan, Flexbox tidak akan membantu secara langsung. Dalam kes tersebut, helah popular menggabungkan position: absolute (atau fixed ) dengan transformasi CSS.

Inilah Caranya:

 .centered {
  Kedudukan: Mutlak;
  Atas: 50%;
  Kiri: 50%;
  Transform: Terjemahan (-50%, -50%);
}

Teknik ini menggerakkan elemen ke bawah dan kanan sebanyak 50% daripada saiz ibu bapa, kemudian mengalihkannya kembali dan ditinggalkan separuh daripada lebar dan ketinggiannya sendiri - dengan berkesan memusatkannya.

Ia amat berguna apabila anda tidak mengetahui dimensi tepat unsur yang anda pusat, yang menjadikannya lebih fleksibel daripada menetapkan margin secara manual.

Grid menawarkan penyelesaian bersih yang lain

CSS Grid juga mempunyai ciri penjajaran terbina dalam yang membolehkan anda memusatkan kandungan dengan mudah. Dengan menetapkan bekas untuk display: grid , dan menggunakan place-items: center , anda akan mendapat kedua-dua menegak dan mendatar berpusat dalam satu baris.

 .container {
  paparan: grid;
  Tempat-item: Pusat;
  Ketinggian: 200px;
}

Ini adalah alternatif yang bagus untuk Flexbox, terutamanya jika anda sudah menggunakan grid untuk susun atur. Ia berkelakuan sama tetapi mengekalkan gaya anda konsisten jika grid adalah alat susun atur utama anda.

Hanya ambil perhatian bahawa place-items menetapkan kedua-dua penjajaran baris dan lajur, jadi jika anda hanya mahu pusat menegak, anda akan menggunakan align-items: center sebaliknya.

Terdapat juga kaedah lain-seperti menggunakan sifat paparan sel atau JavaScript-tetapi yang di atas adalah yang paling praktikal dan disokong secara meluas hari ini. Bergantung pada keperluan susun atur anda dan keperluan sokongan penyemak imbas, Flexbox atau Grid biasanya akan menjadi taruhan terbaik anda.

Pada dasarnya itu sahaja.

Atas ialah kandungan terperinci Apakah beberapa teknik biasa untuk kandungan berpusat secara vertikal menggunakan CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!