Di CSS, Anda harus mengeluh. Anda dapat menggunakan margin: 0 auto; untuk mencapai pemusatan horizontal, tetapi margin: auto 0 tidak dapat mencapai pemusatan vertikal.
Alasan utamanya di sini adalah kontrol induk, yaitu kontrol itu sendiri, tidak diposisikan dengan benar. Melihat langsung kodenya, pertama-tama Anda perlu menggunakan tata letak relatif untuk kontrol induk, lalu Anda perlu menggunakan tata letak absolut untuk kontrol anak, dan menggunakan atribut atas dan bawah, dikombinasikan dengan margin: auto 0;, untuk mencapai memengaruhi.
.container-vertical { posisi: relatif; lebar: 100%; tinggi: 200px; latar belakang: deepskyblue; margin-bawah: 20px;} .container-vertical-item { posisi: lebar: 130px; rata: tengah; latar belakang: kuning; tinggi garis: 80px; 0;}Berpusat secara vertikal.png
Pusatkan secara horizontal dan vertikalDengan pengalaman 5.2, kita dapat mencoba menyetel properti kiri, kanan, atas, dan bawah kontrol anak ke 0, dan margin: otomatis margin di keempat arah. Efek ini dapat dicapai. Sub kontrol yang perlu diperhatikan harus mempunyai atribut display: block;
Lihatlah kodenya
.container-horization-vertical { posisi: relatif; lebar: 100%; tinggi: 200px; latar belakang: deepskyblue; margin-bottom: 20px;} 80 piksel; latar belakang: kuning; tinggi garis: 80 piksel; perataan teks: tengah; 0; bawah: 0; kanan: 0; margin: otomatis;}Ringkasan: Solusi ini masih sangat bagus ketika menyelesaikan beberapa tata letak halaman yang tidak terlalu rumit, dan dapat disesuaikan dengan antarmuka apa pun dan hampir semua browser. Namun untuk halaman yang sangat kompleks, solusi lain mungkin diperlukan, namun Anda juga bisa mendapatkan inspirasi dari ide ini.
Di atas adalah keseluruhan isi artikel ini, saya harap dapat bermanfaat untuk pembelajaran semua orang. Saya juga berharap semua orang mendukung VeVb Wulin Network.