Centrar el contenido de la página verticalmente

Sé cómo puedo centralizar horizontalmente toda la página con CSS. ¿Pero hay una manera de centrar verticalmente la página? Algo como esto ...Centrar el contenido de la página verticalmente

Example

Fuente

2011-03-12 Pieter

espero que le ayuda http://tutorialzine.com/2010/03/centering-div-vertically-and-horizontally/ –

Artículo excelente ... '.className {ancho: 300px; altura: 200px; posición: absoluta; izquierda: 50%; arriba: 50%; margen: -100px 0 0 -150px; } 'lo hizo por mí. ¿Puedes publicar esto como respuesta a mi pregunta para que yo pueda aceptarlo? – Pieter

Hay un gran artículo en MicroTut hacer que http://tutorialzine.com/2010/03/centering-div-vertically-and-horizontally/

Centrado con CSS:

.className{ 
    width:300px; 
    height:200px; 
    position:absolute; 
    left:50%; 
    top:50%; 
    margin:-100px 0 0 -150px; 
}

Centrado con jQuery:

$(window).resize(function(){ 

    $('.className').css({ 
     position:'absolute', 
     left: ($(window).width() - $('.className').outerWidth())/2, 
     top: ($(window).height() - $('.className').outerHeight())/2 
    }); 

}); 

// To initially run the function: 
$(window).resize();

Y se puede ver una demo here

Fuente

2011-03-12 13:40:50

También puede secuestrar de display: table y display: table-cell para este fin CSS. El HTML sería así:

<body> 
    <div id="body"> 
     <!-- Content goes here --> 
    </div> 
</body>

Y el CSS:

html, 
body { 
    width: 100%; 
    height: 100%; 
} 
html { 
    display: table; 
} 
body { 
    display: table-cell; 
    vertical-align: middle; 
}

Si desea centrado horizontal y, a continuación, añadir lo siguiente:

#body { 
    max-width: 1000px; /* Or whatever makes sense for you. */ 
    margin: 0 auto; 
}

Algunos podrían llamar a esto un abuso de CSS pero:

Funcionará exactamente igual casi en todas partes.
Requiere un marcado y un estilo mínimos.
Y la alineación vertical de CSS merece un poco de abuso; la alineación vertical no debería requerir la piratería, las contorsiones y el tamaño absoluto que lo hace.

Referencias:

Fuente

2011-03-12 21:38:39

Centrar el contenido de la página verticalmente

Respuesta

Cuestiones relacionadas