Bagaimana untuk Memusatkan Elemen Div pada Skrin Hanya Menggunakan CSS?-tutorial css-php.cn

How to Center a Div Element on the Screen Using Only CSS?

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

Salin selepas log masuk

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!

sumber：php.cn

Artikel sebelumnya：Mengapa CSS Saya Tidak `kandungan: url()` Paparan Imej dalam Firefox? Artikel seterusnya：Bagaimanakah Saya Boleh Menggayakan Item Senarai Terakhir dengan Boleh Dipercayai dalam Semua Pelayar?

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

Artikel terbaru oleh pengarang