De modo geral, é mais conveniente centralizar o DIV vertical e horizontalmente com uma altura especificada, mas é um pouco mais problemático se a altura não for determinada. Tentei e consegui centralização absoluta através de dois DIVs auxiliares, que são compatíveis com o padrão. navegadores como IE e FF.
Código CSS:
#wrapper{altura:100%;largura:100%;overflow:oculto;posição:relativo}
#wrapper[id]{display:tabela;}
#meio{posição: absoluto;topo:50%;esquerda:50%}
#mid[id]{display:table-cell;left:0;vertical-align:middle;position:static}
#box{posição:relativa;topo:-50%;esquerda:-50%;índice z:9999;largura:300px}
#box[id]{esquerda:0;margem:0 automático;}
div.boxstyle{border:2px solid #000;text-align:center;padding:5px;}
Código XHTML:
http://bolm.cn
Exemplo de centro absoluto DIV
Para explicar brevemente, o invólucro é a camada externa, o meio é a camada intermediária e a caixa é a camada absolutamente centralizada.
Em navegadores padrão como FF, você pode definir o modo de apresentação da camada wrapper para tabela e a camada intermediária para o modo de exibição de célula de tabela, para que você possa usar vertical-align:middle para obter centralização vertical absoluta da camada intermediária, enquanto no IE o método top:50% e o posicionamento relativo de -50% definido pela caixa subsequente são usados para obter a centralização vertical. Os métodos de centralização horizontal também são diferentes. O FF pode simplesmente definir a margem para alcançá-la, enquanto o IE também define a esquerda para compensar um ao outro.
Além disso, expressões como #box[id] são reconhecidas apenas por navegadores padrão como FF, portanto, você pode definir estilos que pertencem a navegadores como FF aqui.
Como a altura da caixa não está definida, o padrão é automático com altura variável, e o mesmo vale para largura variável.