Bagaimana untuk menetapkan div untuk dipusatkan berbanding dengan halaman web dalam css

Kaedah css untuk memusatkan div berbanding halaman web: 1. Gunakan reka letak mutlak "position:absolute;" untuk div, dan tetapkan nilai atas, kiri, kanan dan bawah menjadi sama ; 2. Gunakan susun atur mutlak untuk div, Dan tetapkan nilai atas dan kiri kepada "50%" 3. Pusatkan div melalui atribut transformasi CSS3.

Persekitaran pengendalian tutorial ini: sistem Windows 10, versi CSS3, komputer DELL G3

Cara untuk memusatkan saudara div ke halaman web dalam css?

Css untuk memusatkan div

1. Gunakan reka letak mutlak "position:absolute;" untuk div; Untuk div Gunakan kedudukan susun atur mutlak:absolute; dan tetapkan nilai atas, kiri, kanan dan bawah menjadi sama, tetapi tidak semestinya sama dengan 0 dan tetapkan margin:auto

2. Gunakan reka letak mutlak untuk div dan letakkan Nilai atas dan kiri kedua-duanya ditetapkan kepada 50%; Gunakan kedudukan susun atur mutlak: mutlak untuk div; dan tetapkan nilai atas dan kiri kepada 50%; , kiri dan atas Saiz ialah separuh lebar dan tinggi div

{position:absolute;
top:0;
left:0;
right:0;
bottom:0;
margin:auto;
}

3 Gunakan atribut transformasi css3 untuk memusatkan div.

Kaedah 3: Gunakan kedudukan mutlak div: mutlak, dan tetapkan nilai kiri dan atas kepada 50%. Gunakan atribut transformasi CSS3. transform: terjemah (-50%, -50%)

{position:absolute;
top:50%;
left:50%;
margin:-100px 0 0 -100px;
}

Jika terdapat dua div, dan div yang lebih kecil di dalam dijajarkan secara mendatar, menegak dan berpusat berbanding div yang lebih besar di luar, terdapat beberapa kaedah.

1. Gunakan kedudukan dan margin:auto untuk mencapai. Elemen induk menetapkan kedudukan: relatif; elemen anak menetapkan kedudukan: mutlak, dan menetapkan nilai atas, kiri, kanan dan bawah menjadi sama.

{position:abslolute;
top:50%;
left:50%;
transform：translate（-50%，-50%）；
-webket-transform:translate（-50%，-50%）;
-ms-transform:translate（-50%，-50%）;
-moz-transform:translate（-50%，-50%）;
}

2. Elemen induk menetapkan kedudukan: relatif; elemen anak menetapkan kedudukan: mutlak. Dan tetapkan atas dan kiri kepada 50%, dan tetapkan anjakan kiri dan atas anjakan kepada separuh saiz elemen kanak-kanak

父元素{
position：relative；

}
子元素{
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
margin:auto;
}

Gunakan paparan: flex. Kaedah ini memerlukan tetapan keserasian penyemak imbas.

父元素{
position：relative；
}子元素
{position:absolute;
top:50%;
left:50%;
margin:-100px 0 0 -100px;
}

3 Gunakan transformasi: translate(). Elemen induk menetapkan kedudukan: relatif; elemen anak menetapkan kedudukan: mutlak. Dan tetapkan bahagian atas dan biarkan hingga 50%. Akhirnya tetapkan transformasi: terjemah (-50%, -50%)

{display:flex;
display:-webkit-flex;
justify-content:center;
-webkit-justify-content:center;
align-items:center;
-webkit-align-items:center;
margin:0 auto;
}

Pembelajaran yang disyorkan: "

tutorial video css

"

父元素{
position：relative；
}子元素
{{position:abslolute;
top:50%;
left:50%;
transform：translate（-50%，-50%）；
}

Atas ialah kandungan terperinci Bagaimana untuk menetapkan div untuk dipusatkan berbanding dengan halaman web dalam css. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!