ตอนที่เราเขียนม้า เราอาจจะไม่ค่อยมีความรู้เกี่ยวกับวิธีการจัดกึ่งกลางแนวนอนและแนวตั้งมากนัก ดังนั้นผมจะสรุปวิธีการจัดกึ่งกลางแนวนอนและแนวตั้งที่ใช้กันทั่วไปหลายวิธีให้กับคุณ
วิธีแรก <!--html box code--><!--กึ่งกลางแนวนอนและแนวตั้ง--><div class=Centered1> <p>d พิมพ์แรก</p></div><!-css style part--> .Centered1{ สีพื้นหลัง: #800070; width: 100%; height:500px; 200px; สีพื้นหลัง: deeppink; line-height: 200px; text-align: center; left: 0; right:0; top: 0; วิธีที่สอง <!--html box code--><!--centered แนวนอนและแนวตั้ง--><div class=Centered2> <p>dSecond type</p></div><!-css style part--> / *วิธีที่สองคือการจัดกึ่งกลางแนวนอนและแนวตั้ง*/ .Centered2{ ตำแหน่ง: ความกว้างสัมบูรณ์; 200px; ความสูง: 200px; ระยะขอบซ้าย: -100px; วิธีที่สาม <!--html box code--><!--กึ่งกลางแนวนอนและแนวตั้ง--><div class=Centered3> <p>d ประเภทที่สาม</p></div><!-css style part--> /*วิธีที่สามคือการจัดกึ่งกลางแนวนอนและแนวตั้ง*/ .Centered3{ ตำแหน่ง: ความกว้างสัมบูรณ์; 200px; ความสูง: 200px; พื้นหลัง: ความสูงเส้น: 200px; ซ้าย: 50%; วิธีที่สี่ <!--html box code--><!--ศูนย์กลางแนวนอนและแนวตั้ง--><div class=Centered4> <p>d ประเภทที่สี่</p></div><!-css style part--> /*วิธีที่สี่คือการจัดกึ่งกลางแนวนอนและแนวตั้ง เวอร์ชันเก่าของเค้าโครงดิ้น*/ .Centered4{ สีพื้นหลัง: #FF4444; ความกว้าง: 100%; -webkit-box-pack:center; -webkit-box-align: center; } .Centered4 p { ความกว้าง: 200px; วิธีที่ห้า <!--html box code--><!--กึ่งกลางแนวนอนและแนวตั้ง--><div class=Centered5> <p>d ประเภทที่ห้า</p></div><!-css style part--> /*วิธีที่ห้าคือการจัดกึ่งกลางแนวนอนและแนวตั้ง เวอร์ชันใหม่ของ flex คือการจัดกึ่งกลางแนวนอนและแนวตั้ง*/ .Centered5{ background-color: darkslateblue; height: 500px; ; จัดตำแหน่งรายการ: center; } .Centered5 p { width: 200px; height: 200px;ข้างต้นคือเนื้อหาทั้งหมดของบทความนี้ ฉันหวังว่ามันจะเป็นประโยชน์ต่อการศึกษาของทุกคน ฉันหวังว่าทุกคนจะสนับสนุน VeVb Wulin Network