Rumah >hujung hadapan web >tutorial css >Bagaimanakah Saya Boleh Memusatkan Elemen Div pada Skrin Hanya Menggunakan CSS?
Bagaimanakah Saya Boleh Memusatkan Elemen Div pada Skrin Hanya Menggunakan CSS?
- Linda Hamiltonasal
- 2024-12-01 11:15:12464semak imbas
Memusatkan 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 Letakkan Elemen Untuk meletakkan elemen di tengah tepat, kami menggunakan kedudukan mutlak: Mengira Koordinat Pusat Untuk menentukan pusat skrin, kita perlu untuk mencari titik tengah lebar dan tingginya. Ini melibatkan membahagikannya dengan dua: Melaraskan Margin Elemen Untuk melaraskan kedudukan elemen, kami menggunakan margin negatif. Ini menggerakkan elemen separuh tinggi dan lebarnya daripada kedudukan asalnya, memusatkannya pada skrin: Contoh Lengkap Menggabungkan semuanya, berikut ialah kod CSS lengkap: 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!#divElement {
width: 100px;
height: 100px;
}
#divElement {
position: absolute;
}
top_margin = screen_height / 2;
left_margin = screen_width / 2;
#divElement {
margin-top: -top_margin;
margin-left: -left_margin;
}
#divElement {
position: absolute;
top: 50%;
left: 50%;
margin-top: -50px;
margin-left: -50px;
width: 100px;
height: 100px;
}