Rumah >hujung hadapan web >tutorial css >Bagaimanakah Saya Boleh Memusatkan Elemen Div Secara Menegak Menggunakan CSS?

Bagaimanakah Saya Boleh Memusatkan Elemen Div Secara Menegak Menggunakan CSS?

DDDasal: 2024-12-18 05:51:09420semak imbas

How Can I Vertically Center a Div Element Using CSS?

Penjajaran Menegak

Elemen dengan CSS

Dalam perbincangan ini, kami menangani persoalan biasa tentang cara memusatkan

elemen dalam bekas induknya menggunakan CSS.

Untuk menyelesaikan isu ini, anda boleh menggunakan pelbagai pendekatan. Kaedah moden yang berkesan ialah memanfaatkan flexbox, modul susun atur CSS yang menawarkan kawalan tepat ke atas susunan elemen. Dengan menggunakan peraturan CSS berikut pada elemen induk:

#Login {
    display: flex;
    align-items: center;
}

Anda mengarahkan penyemak imbas untuk menyusun

elemen secara mendatar (dikawal dengan paparan: flex;) dan selaraskannya secara menegak di tengah (align-item: center;). Pendekatan ini berfungsi dengan berkesan dalam kebanyakan penyemak imbas moden.

Untuk penyemak imbas lama yang tidak mempunyai sokongan flexbox, seperti Internet Explorer 9 dan lebih awal, penyelesaian alternatif mungkin diperlukan. Terokai bacaan disyorkan yang disediakan untuk mendapatkan cerapan lanjut tentang sokongan penyemak imbas dan teknik CSS lanjutan untuk penjajaran elemen menegak.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Memusatkan Elemen Div Secara Menegak Menggunakan CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

css for using this display flex issue

Kenyataan：

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel sebelumnya：Mengapa Margin/Padding Terakhir Runtuh dalam Reka Letak Flexbox/Grid?Artikel seterusnya：Mengapa Margin/Padding Terakhir Runtuh dalam Reka Letak Flexbox/Grid?

Artikel berkaitan

Lihat lagi