Método para la página HTML de pantalla completa centrada verticalmente?

Busco una solución multi-navegador válido para una página HTML, que:Método para la página HTML de pantalla completa centrada verticalmente?

consume el 100% de la altura de la pantalla, sin desbordamiento (es decir, sin desplazamiento)
tiene una forma vertical (como horizontalmente) centrado <div> que contendrá el contenido principal

Sé que el centrado vertical es posible cuando el contenedor de envoltura tiene una altura estática. Está ajustando esta altura a la altura de la ventana del navegador algo factible? (Preferiblemente, no se debe usar JS.)

Fuente

2011-01-26 Yuval Adam

Difícil sin JS, ya que HTML/CSS no tiene forma de saber cuál es la altura de la ventana del navegador. Creo que esto solo será posible con JS detectando la altura de la ventana del navegador (y, por supuesto, los cambios a esta altura si el usuario cambia el tamaño) y estableciendo la altura de los elementos estáticos de esa manera. –

vertcenter o deadcenter de http://reisio.com/examples/ debe cubrir los bits difíciles – reisio

@reisio - ¡maravillosos ejemplos! ¿Puedes publicar esto como respuesta para poder votar correctamente? –

Depende de lo que quiere decir con "navegador cruzado". Siguiendo funciona bien con todos los actuales estándares de los compatibles (por lo tanto no IE6):

HTML:

<div id="a"> 
    <div id="b"> 
     <div id="content"></div> 
    </div> 
</div>

CSS:

html, body, #a { 
    margin: 0; 
    padding: 0; 
    height: 100%; 
    width: 100%; 
} 

#a { 
    display: table; 
} 

#b { 
    display: table-cell; 
    margin: 0; 
    padding: 0; 

    text-align: center; 
    vertical-align: middle; 
} 

#content { 
    border: 5px solid red; 
    width: 100px; 
    height: 100px; 
    margin: auto; 
}

ejemplo vivo:

http://jsfiddle.net/mGPmr/1/

Fuente

2011-01-26 14:14:21 RoToRa

Simplemente no es posible sin JavaScript, al menos no con CSS2 o anterior (no estoy seguro si CSS3 hace esto posible, alguien aclare al respecto).

Las otras respuestas proporcionadas requieren ancho y alto absolutos para el elemento; Yo asumí que no había tal requisito. No hay forma de centrar verticalmente un elemento que fluye, que es lo que generalmente desea, dado que no conoce la relación de aspecto de la ventana del navegador para usar contenedores de tamaño fijo de manera confiable para el contenido.

Fuente

2011-01-26 08:33:23

Podría hacer algo como esto. También parece funcionar en IE6:

<html> <head> 

<script type="text/javascript"> </script> 

<style type="text/css"> 

#container { height: 100%; width: 100%; position: relative; } 


#content { 
    border: 5px solid red; 
    width: 100px; 
    height: 100px; 
    position: relative; 
    margin-left: -50px; 
    margin-right: -50px; 
    top: 50%; 
    left: 50%; } 


</style> 


</head> <body> 

<div id="container"> 
     <div id="content"></div> </div> 

</body> </html>

Fuente

2011-01-26 14:38:40 stoneMonkey77

Método para la página HTML de pantalla completa centrada verticalmente?

Respuesta

Cuestiones relacionadas