En general, es más conveniente centrar el DIV vertical y horizontalmente con una altura especificada, pero es un poco más problemático si no se determina la altura. Lo intenté y logré un centrado absoluto mediante dos DIV auxiliares, lo cual es compatible con el estándar. navegadores como IE y FF.
Código CSS:
#wrapper{alto:100%;ancho:100%;desbordamiento:oculto;posición:relativa}
#wrapper[id]{display:table;}
#mid{posición: absoluta;arriba:50%;izquierda:50%}
#mid[id]{display:table-cell;left:0;vertical-align:middle;position:static}
#box{posición:relativa;arriba:-50%;izquierda:-50%;índice z:9999;ancho:300px}
#box[id]{izquierda:0;margen:0 auto;}
div.boxstyle{border:2px solid #000;text-align:center;padding:5px;}
Código XHTML:
<div id="wrapper">
<div id="medio">
<div id="caja" clase="estilo de caja">
<p>http://bolm.cn</p>
<p>Ejemplo de centro absoluto DIV</p>
</div>
</div>
</div>
Para explicarlo brevemente, el envoltorio es la capa exterior, el medio es la capa intermedia y el cuadro es la capa absolutamente centrada.
En navegadores estándar como FF, puede configurar el modo de presentación de la capa contenedora en tabla y la capa intermedia en modo de visualización de celda de tabla, de modo que pueda usar vertical-align:middle para lograr un centrado vertical absoluto de la capa intermedia. mientras que en IE, el método de top: 50% y el posicionamiento relativo de -50% establecido por el cuadro posterior se utilizan para lograr el centrado vertical. Los métodos de centrado horizontal también son diferentes. FF puede simplemente establecer el margen para lograrlo, mientras que IE también establece el margen izquierdo para compensarse entre sí.
Además, expresiones como #box[id] solo son reconocidas por navegadores estándar como FF, por lo que puedes configurar estilos que pertenecen a navegadores como FF aquí.
Dado que la altura del cuadro no está configurada, el valor predeterminado es automático con altura variable, y lo mismo ocurre con el ancho variable.