Centrar un div en vertical

[batallas]

Buenas, tengo un codigo tal que asi para hacer un div centrado horizontalmente:

Código:

#principal {
	margin: auto;
	position:relative;
	left:0px;
	top:0px;
	width:1024px;
	height:600px;
	z-index:1;
	background-color: #53534b;
}

Y quisiera saber que le tengo que añadir para alinearle tambien verticalmente en el centro de la pantalla.

Saludos y gracias

[esjuanma]

Hola. Comentanos un poco para que vas a usar ese div, asi te podemos ayudar mejor.
De cualquier modo, seguramente el siguiente código cumpla con tu requisito:

Código HTML:

#principal {
    margin-top:-300px /* la mitad del alto */;
    margin-left:-512px /* la mitad del ancho */;
    position:absolute;
    left:50%;
    top:50%;
    width:1024px;
    height:600px;
    z-index:1;
    background-color: #53534b;
}
 

Para algo más avanzado seguramente haga falta de Javascript.
Tené en cuenta que el ancho del div es un poco grande, y la resolución mínima ideal es de 1280px (incluso en un monitor de 1024px, el ancho queda corto).

Saludos!

[batallas]

Ahora mismo estoy probando, pero la idea es hacer la "Web" en un div que se centre automaticamente en el centro de la pantalla horizontal y verticalmente segun la resolucion del usuario que visite la web. Yo trabajo con 1280x1024 en casa pero los diseños de las web no suelen llevar ese formato y mi idea esque se centre automaticamente, estoy mirando javascript como forma de hacer algun condicional tipo CASE con varias posibilidades segun las resoluciones de los visitantes.

Estoy mirando y he visto que con jQuery parece que se puede modificar las opciones de las CSS relativas a los DIV. Pero segun parece y he podido leer no hay ningun "comando" CSS para "auto alinear" el div verticalmente :/

[batallas]

PD: Ese codigo si me hace lo que quiero pero creo que cambiando de resolucion no funcionaria porque los pixeles variarian no?

[kseso?]

Hay un fallo conceptual si se pretende centrar en la vertical (usando márgenes negativos) una caja que mide 1024x600 px

Y no, css no tiene comandos.
Tiene propiedades y distintos valores para ello.

Y sí, css sí posibilita el centrado vertical. Otra cosa muy distinta, y totalmente ajena al propio css, es que haya navegadores muy deficientes en cuanto al soporte de ellas.

Declare el html con /display: table/. Al body como /table-row/ y a su div como /table-cell/ además de usar vertical-align con el valor apropiado en éste último.

Pero vamos, que me remito al inicio. Con semejante tamaño, el planteamiento debería ser otro.

[esjuanma]

La idea no es mala, aunque no es algo habitual.
En principio deberías disminuir un poco el ancho del div, aprox a unos 960px.
De ese modo te aseguras de que cualquier monitor de 1024px o más, vean tu sitio correctamente.
Y también deberías hacer uso de Javascript.
Dos funciones que te van a ser útiles:

Código javascript:

window.innerWidth y window.innerHeight
 

Devuelven el ancho y alto disponible en el documento.
Entonces, si ya sabés que tu div tiene 600px de alto, podrías usar un código parecido a este:

Código Javascript:

document.getElementById('divPrincipal').style.marginTop = -window.innerHeight / 2
 

Es solo una idea.

[batallas]

Ok, genial 2 respuestas muy buenas y que vere haber que solucion le puedo dar; solo otra preguntita, cuando pongo un div con position:relative; que se puede hacer para quitar el bordecito que deja arriba, es decir, porque deja como un margen vertical?.

Saludos y gracias