Muy bien, entonces esta es básicamente la pregunta habitual "cómo centrar verticalmente con CSS", pero con algunas capturas.

Sin Javascript HTML y CSS solamente. CSS3 está bien siempre que sea razonablemente compatible con los navegadores actuales.

Se desconoce el contenido del elemento y, por lo tanto, su altura. Puede ser desde unas pocas docenas hasta unos cientos de píxeles. En el futuro, incluso podría tener un script que agregue y elimine elementos dentro, por lo que puede cambiar la altura a medida que el usuario interactúa con él.

Hay otro contenido en la página: una barra de navegación a la izquierda y un menú en la parte superior. Estos deben ser accesibles.

El enfoque que he usado es el método de tres contenedores-div usando display: table-cell, como se documenta en:http://www.jakpsatweb.cz/css/css-vertical-center-solution.html Esto resuelve los problemas 1 y 2, pero no 3.

http://imgh.us/vcenter.jpg Muestra el diseño y el problema. El cuadro amarillo es el contenedor más interno. Los cuadros de puntos rojos y verdes alrededor de toda la página (que se han vuelto algo borrosos debido a la codificación JPEG) son los contenedores más externos y medios, respectivamente. (El pie de página fuera de lugar es un tema separado ...)

El problema con este diseño es que los contenedores externos cubren toda la página, y esto hace que sea imposible hacer clic en la barra de navegación, porque ahora está "debajo" de esos contenedores. El índice Z puede moverlos a la parte inferior, pero luego es imposible hacer clic en cualquier cosa dentro del cuadro rojo, porque ahora está "debajo" del cuadro de contenido principal de la página. (XHTML solo permite un único elemento dentro del <cuerpo>, por lo que acabo de envolverlo todo en un <div>.) Incluso si los dos contenedores externos tienen un índice z: -100 y el contenedor interno tiene un índice z: 200, todavía termina bajo el cuadro de contenido principal por alguna razón. (Probé varios atributos de posición).

La única solución que he visto es una nueva propiedad CSS3, eventos de puntero, que en teoría me permitiría hacer que los eventos pasen a través de los contenedores transparentes como esperaba; sin embargo, esto parece ser bastante nuevo y aún no es compatible con la mayoría de los navegadores fuera de SVG, e imagino que tendría el mismo problema que con el índice Z.

Quiero el elemento en el centro de la página, no el centro del área de contenido (es decir, ignorar las barras de navegación en el cálculo de la posición), por lo que colocar el contenedor dentro del área de contenido no es una solución ideal. (También estoy usando este estilo en la página de inicio de sesión, que no tiene barras de navegación, y sería un poco extraño si los elementos "centrados" estuvieran centrados en relación con una barra de navegación que no siempre es visible).

En resumen, lo que necesito es centrar, sin usar Javascript, un elemento de altura desconocida en una página con otro contenido en sus bordes, sin cubrir ninguno de los contenidos con una capa invisible (y así hacer que no se pueda hacer clic).