Rumah >hujung hadapan web >tutorial css >Bagaimanakah Saya Boleh Memusatkan Elemen Div dengan Sempurna pada Skrin Hanya Menggunakan CSS?

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

Mary-Kate Olsenasal: 2024-12-05 18:29:12929semak imbas

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;
}

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!

css using this position margin viewport table http

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：Grid CSS lwn. Flexbox: Mana yang Terbaik untuk Mencipta Petak Responsif?Artikel seterusnya：Grid CSS lwn. Flexbox: Mana yang Terbaik untuk Mencipta Petak Responsif?

Artikel berkaitan

Lihat lagi