AYUDA: centrado dinámico de capa

[miguelangelss4]

Buenas a todos, y gracias por interesaros por mi post.... bien al temita.

A ver estoy intentando hacer una web y tengo una capa que estará oculta hasta que el usuario la pinche en un determinado link, hasta ahí todo correcto. Quiero que la capa aparezca en el centro del documento (ojo, centro del documento, que no de la pantalla), independientemente de la resolución de pantalla del usuario, o de si tiene el explorador maximizado o no; y ya de paso si puede ser que la capa se vuelva a centrar cada vez que el tamaño del explorador se modifique (de ahí lo de "centrado dinámico").

Casi he conseguido centrarlo, pero me queda un pelín desplazado... adjunto una imagen para q os hagáis mejor idea del asunto:



Las lineas negras indican el centro del documento y el recuadro rojo los bordes de la capa, quiero que el centro de ambos coincida.

Eso lo he conseguido después de googlear bastante y conseguir parir, poco a poco, este código:

Código:

<style>
body {
margin: 0;
padding: 0;
}
#centro {
background-color:#FF0;
position: absolute;
left: 50%;
top: 50%;
}
</style>

Aunque mi idea es utilizar javascript (con jquery mejor :xD)....

¿Alguna idea?
Gracias a todos!!

[linternazo]

Pues a ver, para centrar un elemento horizontalmente siempre se recomienda

margin: 0 auto; sin left ni nada.


Otra posibilidad, aunque creo que nada recomentadada seria:

left: 50%;
margin-left: -100px;

Poniendo como margin-left la mitad de la anchura del elemento.

[miguelangelss4]

Muchas gracias linternazo funciona perfectamente para el centrado horizontal, solo hay dos pegas:

• ¿Cómo hago eso pero para la alineación vertical?
• La altura y anchura del elemento varían, asíq... ¿cómo hago para usar la opción no recomendable, si quisiera hacerlo?