¿Por qué no funciona el porcentaje de altura con la pantalla: tabla-celda?

Estoy tratando de centrar horizontal y verticalmente un div dentro de un div externo. Funciona cuando el div exterior ha anchura y la altura específico fijado en píxeles como¿Por qué no funciona el porcentaje de altura con la pantalla: tabla-celda?

#countdownBox { 
    width: 700px; 
    height: 500px; 
    display: table-cell; 
    vertical-align: middle; 
    text-align: center; 
}

pero falla cuando la altura y la anchura son porcentajes como

#countdownBox { 
    width: 100%; 
    height: 100%; 
    display: table-cell; 
    vertical-align: middle; 
    text-align: center; 
}

¿Por qué es esto y es que hay un trabajo alrededor?

EDITAR Aquí está el código HTML con CSS contenedor:

#countdownBoxContainer { 
width: 100%; 
height: 100%; 
position: absolute; 
bottom: 0; 
left: 0; 
z-index: 3; 
} 

<div id="countdownBoxContainer"> 
    <div id="countdownBox"> 
     <div> 
     hi there 
     </div> 
    </div> 
</div>

Fuente

2012-01-04 zakdances

¿Cómo se ve el HTML? Los anchos y alturas porcentuales (por lo general) no funcionarán a menos que el elemento contenedor tenga una dimensión establecida. – HackedByChinese

agregó HTML. El contenedor es del mismo tamaño que su padre. – zakdances

base en el hecho de que tiene la anchura y la altura del 100% declaró que voy a asumir que no está esperando a alguien tiene que desplazarse aquí. See this Fiddle donde tengo una solución de trabajo basada en esos parámetros.

recordar que display: table-cell; actúa exactamente igual que <td> elementos y no se represente correctamente a menos que estén en un <table> (o un contenedor que es display: table;).

El otro problema es que <html> y no son necesariamente el alto de la pantalla si el contenido es muy pequeño. html, body { height: 100%; } corrige esto pero es un poco hacky.

Fuente

2012-01-04 02:50:43

Esto funciona, gracias. Sin embargo, para mantener una posición absoluta en los elementos, he tenido que agregar otro envoltorio externo que contenga la pantalla: tabla div. Esto significa que ahora tengo 3 capas de divs solo para centrar un elemento ... parece malditamente torpe. – zakdances

¿Por qué necesita que el contenedor esté completamente posicionado? –

Porque necesita superponerse a otros divs. – zakdances

¿Por qué no funciona el porcentaje de altura con la pantalla: tabla-celda?

Respuesta

Cuestiones relacionadas