โดยทั่วไปแล้ว จะสะดวกกว่าที่จะจัดกึ่งกลาง DIV ในแนวตั้งและแนวนอนด้วยความสูงที่ระบุ แต่จะลำบากกว่าเล็กน้อยหากไม่ได้กำหนดความสูงไว้ ฉันลองใช้และได้จุดศูนย์กลางแบบสัมบูรณ์ผ่าน DIV เสริมสองตัวซึ่งเข้ากันได้กับมาตรฐาน เบราว์เซอร์เช่น IE และ FF
รหัส CSS:
#wrapper{height:100%;width:100%;overflow:hidden;position:relative}
#wrapper[id]{display:table;}
#กลาง{ตำแหน่ง: สัมบูรณ์;บน:50%;ซ้าย:50%}
#mid[id]{display:table-cell;left:0;vertical-align:middle;position:static}
#box{ตำแหน่ง:ญาติ;ด้านบน:-50%;ซ้าย:-50%;z-ดัชนี:9999;ความกว้าง:300px}
#box[id]{left:0;margin:0 อัตโนมัติ;}
div.boxstyle{border:2px solid #000;text-align:center;padding:5px;}
รหัส XHTML:
<div id="wrapper">
<div id="กลาง">
<div id="box" class="boxstyle">
<p>http://bolm.cn</p>
<p>ตัวอย่างจุดศูนย์กลางสัมบูรณ์ DIV</p>
</div>
</div>
</div>
เพื่ออธิบายโดยย่อ กระดาษห่อคือชั้นนอก ชั้นกลางคือชั้นกลาง และกล่องคือชั้นที่อยู่กึ่งกลางโดยสิ้นเชิง
ในเบราว์เซอร์มาตรฐาน เช่น FF คุณสามารถตั้งค่าโหมดการนำเสนอของเลเยอร์ wrapper เป็นตาราง และเลเยอร์กลางเป็นโหมดการแสดงผลเซลล์ตาราง เพื่อให้คุณสามารถใช้การจัดแนวตั้ง: กลาง เพื่อให้เลเยอร์กลางอยู่ตรงกลางแนวตั้งโดยสมบูรณ์ ในขณะที่อยู่ใน IE วิธีการด้านบน: 50% และการวางตำแหน่งสัมพัทธ์ของ -50% ที่กำหนดโดยกล่องถัดไปจะถูกนำมาใช้เพื่อให้เกิดการจัดกึ่งกลางแนวตั้ง วิธีการจัดกึ่งกลางแนวนอนก็แตกต่างกันเช่นกัน FF สามารถตั้งค่าระยะขอบเพื่อให้บรรลุได้ ในขณะที่ IE ยังตั้งค่าด้านซ้ายเพื่อชดเชยซึ่งกันและกัน
นอกจากนี้ เฉพาะเบราว์เซอร์มาตรฐาน เช่น FF เท่านั้นที่รู้จักนิพจน์ เช่น #box[id] ดังนั้นคุณจึงสามารถกำหนดสไตล์ที่เป็นของเบราว์เซอร์ เช่น FF ได้ที่นี่
เนื่องจากไม่ได้ตั้งค่าความสูงของกล่อง ค่าเริ่มต้นคืออัตโนมัติพร้อมความสูงผันแปรได้ และเช่นเดียวกันกับความกว้างของตัวแปร