Rumah > hujung hadapan web > tutorial css > Bagaimana untuk Memusatkan Elemen `` pada Skrin Menggunakan CSS?

Bagaimana untuk Memusatkan Elemen `` pada Skrin Menggunakan CSS?

Linda Hamilton
Lepaskan: 2024-12-02 00:46:11
asal
585 orang telah melayarinya

How to Center a `` Element on the Screen Using CSS?

Cara Meletakkan <div> Elemen di Tengah Skrin Menggunakan CSS

Memusatkan peletakan <div> elemen pada halaman web, tanpa mengira resolusi skrin, memerlukan penggayaan CSS yang teliti. Matlamatnya adalah untuk memastikan jarak yang sama pada semua bahagian: atas, bawah, kiri dan kanan.

Kaedah 1: Kedudukan Mutlak dengan Dimensi Tetap

Untuk elemen yang telah ditetapkan terlebih dahulu lebar dan tinggi, penyelesaian paling mudah adalah mutlak kedudukan:

#divElement {
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -50px;
    margin-left: -50px;
    width: 100px;
    height: 100px;
}
Salin selepas log masuk
  • Kaedah ini menetapkan kedudukan elemen kepada 50% daripada ketinggian dan lebar skrin, meletakkannya di tengah.
  • Jdar negatif separuh ketinggian elemen dan lebar mengimbangi kedudukannya dengan jumlah yang betul, memastikan jarak yang sama pada semua sisi.

Contoh:

<div>
Salin selepas log masuk

Kaedah 2: CSS Transform Property

Untuk elemen dengan dinamik saiz, sifat transformasi CSS boleh digunakan:

#divElement {
    transform: translate(-50%, -50%);
    position: absolute;
    top: 50%;
    left: 50%;
}
Salin selepas log masuk
  • Kaedah ini menggunakan penjelmaan terjemahan kepada elemen, menganjaknya separuh lebar dan tingginya dalam kedua-dua arah mendatar dan menegak.
  • Elemen kekal dalam kedudukan pada 50% ketinggian dan lebar skrin, tetapi ia diimbangi dengan betul disebabkan oleh transformasi.

Nota:

  • Kedua-dua kaedah memastikan elemen berada di tengah dan tidak akan menatal dengan kandungan halaman.
  • Adalah disyorkan untuk menggunakan penyemak imbas moden untuk keserasian optimum dengan teknik CSS ini.

Atas ialah kandungan terperinci Bagaimana untuk Memusatkan Elemen `` pada Skrin 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
Artikel terbaru oleh pengarang
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan