Bagaimanakah Saya Boleh Memusatkan Elemen Div dengan Sempurna pada Skrin Hanya Menggunakan CSS?-tutorial css-php.cn

Bagaimanakah Saya Boleh Memusatkan Elemen Div dengan Sempurna pada Skrin Hanya Menggunakan CSS?

Mary-Kate Olsen

Lepaskan： 2024-12-05 18:29:12

asal

978 orang telah melayarinya

How Can I Perfectly Center a Div Element on the Screen Using Only CSS?

Kedudukan

Elemen Sempurna di Pusat Skrin dengan CSS Tulen

Dalam artikel ini, kami akan menangani cabaran biasa untuk memusatkan

(atau ) elemen tanpa mengira saiz skrin. Matlamatnya adalah untuk mengagihkan ruang yang tinggal sama rata pada semua sisi. Begini caranya:

Menggunakan Kedudukan Mutlak

Jika elemen mempunyai lebar dan ketinggian tetap, kedudukan mutlak ialah pendekatan yang paling mudah:

#divElement {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -50px;
    margin-left: -50px;
    width: 100px;
    height: 100px;
}

Salin selepas log masuk

Dalam kes ini:

kedudukan: mutlak mengeluarkan unsur daripada biasa aliran dokumen.
atas: 50% menetapkan kedudukan teratas elemen ke tengah port pandangan.
kiri: 50% menetapkan kedudukan kiri elemen ke tengah port pandangan.
margin-top: -50px dan margin-left: -50px digunakan untuk melaraskan kedudukannya dalam viewport.

Nota: Sentiasa elakkan gaya sebaris kerana ia boleh menimbulkan masalah penyelenggaraan dan menghalang kebolehgunaan semula kod.

Berikut ialah contoh yang berfungsi pada JSFiddle: http:/ /jsfiddle.net/S5bKq/.

Dengan mengikuti langkah-langkah ini, anda boleh memusatkan mana-mana

atau elemen pada halaman web, tanpa mengira saiz skrin, memastikan reka letak yang menarik secara visual.

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

Artikel sebelumnya：Grid CSS lwn. Flexbox: Mana yang Terbaik untuk Mencipta Petak Responsif? Artikel seterusnya：Mengapa Elemen HTML Kelihatan Tertunda pada Safari iPad Semasa Menatal, dan Bagaimana Ini Boleh Dibetulkan?

Kenyataan Laman Web ini

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 terbaru oleh pengarang

Isu terkini

function_exists() tidak boleh menentukan fungsi tersuai Ujian fungsi () {return true;} jika (function_exists ('test')) {echo "test is functio...

daripada 2024-04-29 11:01:01

2735

Bagaimana untuk memaparkan versi mudah alih Google Chrome Hello cikgu, bagaimana saya boleh menukar Google Chrome kepada versi mudah alih?

daripada 2024-04-23 00:22:19

2852

Tetingkap anak mengendalikan tetingkap induk, tetapi output tidak bertindak balas. Dua ayat pertama boleh dilaksanakan, tetapi ayat terakhir tidak boleh dilaksanakan.

daripada 2024-04-19 15:37:47

2400

Tiada output dalam tetingkap induk document.onclick = function(){ window.opener.document.write('Saya adalah output tetingkap ...