Secara umum, akan lebih mudah untuk memusatkan DIV secara vertikal dan horizontal dengan ketinggian tertentu, tetapi akan sedikit lebih merepotkan jika ketinggian tidak ditentukan. Saya mencobanya dan mencapai pemusatan absolut melalui dua DIV tambahan, yang kompatibel dengan standar browser seperti IE dan FF.
Kode CSS:
#wrapper{height:100%;width:100%;overflow:hidden;position:relative}
#wrapper[id]{display:tabel;}
#tengah{posisi: absolut;atas:50%;kiri:50%}
#mid[id]{display:sel-tabel;kiri:0;perataan vertikal:tengah;posisi:statis}
#box{position:relative;atas:-50%;kiri:-50%;z-index:9999;width:300px}
#box[id]{kiri:0;margin:0 otomatis;}
div.boxstyle{border:2px solid #000;text-align:center;padding:5px;}
Kode XHTML:
<div id="wrapper">
<div id="pertengahan">
<div id="kotak" kelas="gaya kotak">
<p>http://bolm.cn</p>
<p>Contoh pusat absolut DIV</p>
</div>
</div>
</div>
Penjelasan singkatnya, wrapper adalah lapisan terluar, mid adalah lapisan tengah, dan kotak adalah lapisan yang benar-benar berada di tengah.
Di browser standar seperti FF, Anda dapat mengatur mode presentasi lapisan pembungkus ke tabel dan lapisan tengah ke mode tampilan sel tabel, sehingga Anda dapat menggunakan vertical-align:middle untuk mencapai pemusatan vertikal absolut pada lapisan tengah, sedangkan di IE Metode top:50% dan posisi relatif -50% yang ditetapkan oleh kotak berikutnya digunakan untuk mencapai pemusatan vertikal. Metode pemusatan horizontal juga berbeda. FF cukup mengatur margin untuk mencapainya, sedangkan IE juga mengatur kiri untuk saling mengimbangi.
Selain itu, ekspresi seperti #box[id] hanya dikenali oleh browser standar seperti FF, sehingga Anda dapat mengatur gaya milik browser seperti FF di sini.
Karena tinggi kotak tidak disetel, defaultnya adalah otomatis dengan tinggi variabel, dan hal yang sama berlaku untuk lebar variabel.