Generally speaking, it is more convenient to center the DIV vertically and horizontally with a specified height, but it is a little more troublesome if the height is not determined. I tried it and achieved absolute centering through two auxiliary DIVs, which is compatible with standard browsers such as IE and FF.
CSS code:
#wrapper{height:100%;width:100%;overflow:hidden;position:relative}
#wrapper[id]{display:table;}
#mid{position: absolute;top:50%;left:50%}
#mid[id]{display:table-cell;left:0;vertical-align:middle;position:static}
#box{position:relative;top:-50%;left:-50%;z-index:9999;width:300px}
#box[id]{left:0;margin:0 auto;}
div.boxstyle{border:2px solid #000;text-align:center;padding:5px;}
XHTML code:
<div id="wrapper">
<div id="mid">
<div id="box" class="boxstyle">
<p>http://bolm.cn</p>
<p>DIV absolute center example</p>
</div>
</div>
</div>
To explain briefly, wrapper is the outer layer, mid is the middle layer, and box is the absolutely centered layer.
In standard browsers such as FF, you can set the presentation mode of the wrapper layer to table and the mid layer to table-cell display mode, so that you can use vertical-align:middle to achieve absolute vertical centering of the middle layer, while in IE The method of top:50% and the relative positioning of -50% set by the subsequent box are used to achieve vertical centering. The methods of horizontal centering are also different. FF can simply set the margin to achieve it, while IE also sets the left to offset each other.
In addition, expressions like #box[id] are only recognized by standard browsers such as FF, so you can set styles that belong to browsers such as FF here.
Since the height of the box is not set, the default is auto with variable height, and the same goes for variable width.