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

#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!