Sí que tiene explicación. Es más, está haciendo estupendamente bien lo que le indica en su código.
Veamos si soy capaz de explicarme, o mejor, de que usted lo vea. Es imprescindible que siga y lea lo enlazado, por favor.
Su código:
Código CSS:
Ver original#contenedor {
POSITION: absolute;
WIDTH: 800px;
HEIGHT: 600px;
TOP: 50%;
LEFT: 50%;
MARGIN-TOP: -300px;
MARGIN-LEFT: -400px;
}
Le dice que tome una
posición absoluta y se coloque (tomando como referente la esquina superior izquierda) en el centro del html/body (la ventana del navegador).
Con lo anterior, la caja #contenedor queda desplazada hacia abajo y la derecha. Recuerde que lo que ha puesto en el centro ha sido la esquina superior izquierda. Así que esa diferencia la corrige con el margen negativo. Que si se fija su valor es la mitad del tamaño.
Así que ahora ya tiene un div centrado en horizontal en la ventana (siempre que la ventana tenga un tamaño mínimo igual a la anchura de #contenedor + el margen asignado (en valor absoluto) = 1200px
Y para la vertical, igual. Cambiando anchura por altura = 900px
Valores para su ejemplo.
¿Qué ocurre con medidas de ventana menores a ese valor mínimo?
Sencillamente, su código sigue haciendo lo que le ha indicado, así que calcula el centro, posiciona la caja y aplica el margen negativo.
Si la ventana mide h(altura, eje y)= 400px y w(anchura, eje x)= 500px el centro está en las coordenadas y= 200 // x=250 le resta el margen indicado y se coloca en x=-50 y= -200 y voilá! desaparecen los primeros 50px de la parte superior y los 200px de la izquierda.
Espero haberme explicado y no haber cometido algún error en los cálculos numéricos.