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

Memusatkan

Elemen pada Skrin dengan CSS

Apabila membuat reka letak web, selalunya perlu meletakkan elemen di tengah-tengah skrin. Ini boleh dicapai menggunakan CSS, menghapuskan keperluan untuk gaya sebaris atau penyelesaian JavaScript yang kompleks.

Membetulkan Lebar dan Ketinggian Elemen

Satu pendekatan mudah ialah mentakrifkan tetapan lebar dan tinggi untuk

elemen:

#divElement {
    width: 100px;
    height: 100px;
}

Letakkan Elemen

Untuk meletakkan elemen di tengah tepat, kami menggunakan kedudukan mutlak:

#divElement {
    position: absolute;
}

Mengira Koordinat Pusat

Untuk menentukan pusat skrin, kita perlu untuk mencari titik tengah lebar dan tingginya. Ini melibatkan membahagikannya dengan dua:

top_margin = screen_height / 2;
left_margin = screen_width / 2;

Melaraskan Margin Elemen

Untuk melaraskan kedudukan elemen, kami menggunakan margin negatif. Ini menggerakkan elemen separuh tinggi dan lebarnya daripada kedudukan asalnya, memusatkannya pada skrin:

#divElement {
    margin-top: -top_margin;
    margin-left: -left_margin;
}

Contoh Lengkap

Menggabungkan semuanya, berikut ialah kod CSS lengkap:

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

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

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

Alat AI Hot

Undresser.AI Undress

Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover

Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

Undress AI Tool

Gambar buka pakaian secara percuma

Clothoff.io

Penyingkiran pakaian AI

Video Face Swap

Tukar muka dalam mana-mana video dengan mudah menggunakan alat tukar muka AI percuma kami!

Tunjukkan Lagi

Artikel Panas

Bagaimana untuk memperbaiki KB5055612 gagal dipasang di Windows 10?

4 minggu yang lalu By DDD

<🎜>: Bubble Gum Simulator Infinity - Cara Mendapatkan dan Menggunakan Kekunci Diraja

4 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌

<🎜>: Tumbuh Taman - Panduan Mutasi Lengkap

3 minggu yang lalu By DDD

Nordhold: Sistem Fusion, dijelaskan

4 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌

Mandragora: Whispers of the Witch Tree - Cara Membuka Kunci Cangkuk Bergelut

3 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌

Tunjukkan Lagi

Alat panas

Notepad++7.3.1

Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina

Versi Cina, sangat mudah digunakan

Hantar Studio 13.0.1

Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6

Alat pembangunan web visual

SublimeText3 versi Mac

Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

Tunjukkan Lagi

Topik panas

Tutorial Java

1671

14

Tutorial CakePHP

1428

52

Tutorial Laravel

1331

25

Tutorial PHP

1276

29

Tutorial C#

1256

24

Tunjukkan Lagi