Penjelasan detail beberapa metode pemusatan HTML secara horizontal dan vertikal (Dasar)

Saat kita menulis kuda, kita mungkin tidak tahu banyak tentang metode pemusatan horizontal dan vertikal. Jadi saya akan memberikan ringkasan beberapa metode pemusatan horizontal dan vertikal yang umum digunakan.

 <!--kode kotak html--><!--terpusat secara horizontal dan vertikal--><div class=Centered1> <p>d tipe pertama</p></div><!-bagian gaya css--> .Centered1{ warna latar: #800070; lebar: 100%; tinggi:500px; posisi: relatif; } .Centered1 p{ lebar: 200px; 200 piksel; warna latar: merah muda dalam; tinggi garis: 200 piksel; perataan teks: tengah; posisi: kiri: 0;

 <!--kode kotak html--><!--ditengahkan secara horizontal dan vertikal--><div class=Centered2> <p>tipe kedua</p></div><!-bagian gaya css--> / *Metode kedua adalah terpusat secara horizontal dan vertikal*/ .Centered2{ background-color: #ef8518; width: 100%; height: 500px; position: relative; 200 piksel; tinggi: 200 piksel; warna latar: merah; tinggi garis: 200 piksel; perataan teks: kiri: 50%;

 <!--kode kotak html--><!--dipusatkan secara horizontal dan vertikal--><div class=Centered3> <p>d tipe ketiga</p></div><!-bagian gaya css--> /*Metode ketiga adalah pemusatan horizontal dan vertikal*/ .Centered3{ background-color: dimgrey; width: 100%; height: 500px; position: relative; 200 piksel; tinggi: 200 piksel; warna latar: oranye gelap; tinggi garis: 200 piksel; perataan teks: tengah; kiri: 50%;

 <!--kode kotak html--><!--terpusat secara horizontal dan vertikal--><div class=Centered4> <p>d tipe keempat</p></div><!-bagian gaya css--> /*Metode keempat adalah pemusatan horizontal dan vertikal, tata letak fleksibel versi lama*/ .Centered4{ warna latar: #FF4444 lebar: 100% tinggi: 500 piksel tampilan: -webkit-box; -webkit-box-pack:center; -webkit-box-align: center; } .Centered4 p { lebar: 200px; tinggi: 200px; warna latar: tinggi garis: 200px;

 <!--kode kotak html--><!--tengah horizontal dan vertikal--><div class=Centered5> <p>d tipe kelima</p></div><!-bagian gaya css--> /*Metode kelima adalah pemusatan horizontal dan vertikal, versi baru dari flex adalah pemusatan horizontal dan vertikal*/ .Centered5{ background-color: darkslateblue; ; align-items: center; } .Centered5 p { lebar: 200px; tinggi: 200px; warna latar:fuchsia; tinggi garis: 200px;

Di atas adalah keseluruhan isi artikel ini, saya harap dapat bermanfaat untuk pembelajaran semua orang. Saya juga berharap semua orang mendukung VeVb Wulin Network.