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…


Ejemplo


Hay un gran artículo en MicroTut para hacer eso 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 puedes ver una demostración aquí

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

  

Y el CSS:

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

Si también quieres un centrado horizontal, agrega esto:

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

Algunos llamarían esto un abuso de CSS pero:

  • Funcionará exactamente igual en casi todos lados.
  • Requiere mínimo marcado y estilo.
  • 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

  • Centrado vertical de altura flexible con CSS, más allá de IE7
  • Lobo con piel de oveja