Bagaimana untuk Memusatkan Elemen `` pada Skrin Menggunakan 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;
}

• 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>

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

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