Rumah >hujung hadapan web >tutorial css >Bagaimana untuk Memusatkan Elemen Div pada Skrin Hanya Menggunakan CSS?
Bagaimana untuk Memusatkan Elemen Div pada Skrin Hanya Menggunakan CSS?
- DDDasal
- 2024-11-29 07:17:14779semak imbas
Memusatkan Elemen pada Skrin Menggunakan CSS
Soalan:
Bagaimanakah saya boleh memusatkan
elemen pada skrin, tanpa mengira saiz skrin, hanya menggunakan CSS?
Penyelesaian:
Untuk memusatkan
(atau ) elemen di tengah skrin, ikuti langkah berikut:
- Tetapkan kedudukan elemen kepada "mutlak."
- Tetapkan bahagian atas dan kiri sifat kepada "50%."
- Gunakan margin negatif untuk mengimbangi kedudukan elemen supaya ia muncul berpusat:
jidar atas: -{height_of_element}/2;
jidar-kiri: -{width_of_element}/2;
Contoh dengan Tetap Saiz:
#myDiv {
position: absolute;
top: 50%;
left: 50%;
margin-top: -50px;
margin-left: -50px;
width: 100px;
height: 100px;
}
Nota:
- Jika anda tidak mahu elemen itu menatal dengan tapak web, pertimbangkan untuk menggunakan "tetap" kedudukan bukannya "mutlak."
- Untuk elemen dinamik yang melaraskan saiznya, gunakan JavaScript atau CSS calc() untuk mengira yang betul jidar.
Atas ialah kandungan terperinci Bagaimana untuk Memusatkan Elemen Div pada Skrin Hanya Menggunakan CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
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.cnArtikel sebelumnya：Mengapa CSS Saya Tidak `kandungan: url()` Paparan Imej dalam Firefox?Artikel seterusnya：Mengapa CSS Saya Tidak `kandungan: url()` Paparan Imej dalam Firefox?
Soalan:
Bagaimanakah saya boleh memusatkan
elemen pada skrin, tanpa mengira saiz skrin, hanya menggunakan CSS?
Penyelesaian:
Untuk memusatkan
(atau ) elemen di tengah skrin, ikuti langkah berikut: