Alinear el contenido horizontal y verticalmente

¿Cómo puedo alinear el contenido de mi pagina web al centro? Me refiero al centro en horizontal (que es fácil) y al centro vertical, que me resulta...

La FAQ Alinear el contenido horizontal y verticalmente tiene

Pertenece a la categoría:

Pregunta
¿Cómo puedo alinear el contenido de mi pagina web al centro? Me refiero al centro en horizontal (que es fácil) y al centro vertical, que me resulta más dificil.


Respuesta de Christian Santalucía
Aquí tienes una posibilidad. Espero que te sirva:




<HTML>


<HEAD>


<TITLE>Ejemplo de alineación horizontal y vertical</TITLE>


</HEAD>


<BODY>


<TABLE WIDTH="100%" HEIGHT="100%">


<TR>


<TD VALIGN="MIDDLE" ALIGN="CENTER">





DesarrolloWeb.com





</TD>


</TR>


</TABLE>


</BODY>


</HTML>

Complementar la respuestaComplementar la respuesta
Volver al árbol de categoríasVolver al árbol de categorías

Comentarios
Fueron enviados 14 comentarios a la faq
7 comentarios no revisados
7 comentarios revisados:
Por: Miguel Angel Alvarez
06/5/2005
Resulta que es un tema complicado este, si queremos centrar verticalmente usando únicamente CSS. Buscando un poco no he conseguido que me funcione como yo quiero al 100% ninguna de las soluciones.

Casi todos los documentos que he encontrado sirven para centrar los elementos verticalmente en una capa, pero no para centrarlos verticalmente en la página entera.

Te paso las referencias que he consultado, que han ofrecido una solución más óptima:

http://www.jakpsatweb.cz/css/css-vertical-center-solution.html

Que tiene un resumen en castellano en: http://www.forosdelweb.com/showpost.php?p=967310&postcount=50

Pero al convertir la solución anterior para que me muestre centrado para todo el contenido de la página y no sólo para una capa, en Internet Explorer, cuando los elementos de la página crecen mucho verticalmente, se me pierden por la parte de arriba. El código sería el siguiente:

<html>
<head>
    <title>centrar una capa verticalmente</title>

<style type="text/css">
BODY{
text-align: center;
}
#total{
display:table;
height:100%;
text-align: left;
margin: auto;
}
#contenido{
_position: absolute;
_top: 50%;
display: table-cell;
vertical-align: middle;
text-align:left;
width:400px;
}
#centrar{
_position: relative;
_top: -50%;
background-color:e0e0e0;
border-style:solid;
border-width:2px;
border-color:#999999;
}
</style>
</head>
<body>
<div id="total">
    <div id="contenido">
       <div id=centrar>
          <h1>Hola</h1>
          Esto está alineado verticalmente... es una prueba como otra cualquiera. Pillo un texto cualquiera para pegar aquí y hacer que el tamaño de la capa crezca un poco.
          <br><br>
          Código que nos ayuda a crear un menú con css similar a los de Javascript.
          <br>
          <br>
          El siguiente estilo nos permite crear un menú similar a los de javascript, en donde representamos su estado de reposo (out) con un color y su estado sobre (over) con otro.
       </div>
    </div>
</div>

</body>
</html>

Funciona correctamente, pero prueba a aumentar el texto de la capa principal... si pones más texto del que cabe en una ventana, se pierde por la parte de arriba y no se puede visualizar. En Mozilla me funciona perfectamente.

Existen otros ejemplos que me han gustado. Son más simples aunque no sirven para todos los casos y sólo nos solucinan el problema parcialmente. Los comento por si te sirven de algo:

- Centrado del texto de una capa, siempre y cuando este texto tenga una sóla línea: http://wellstyled.com/css-single-line-vertical-centering.html
- Centrado de todo el contenido de la página, aunque para un ancho fijo del documento. Es decir, si la página tiene más contenidos que el espacio reservado, la solución deja de funcionar: http://vmalek.murphy.cz/
Por: Ariel
08/2/2006
Si utilizas el <!DOCTYPE ya sea strict, transitional o frames... no podras utilizar este codigo pues el parametro height es considerado obsoleto. Pero eso solo si quieres hacer las cosas bien y compatibles, respetando los estandares de la W3C
Por: Pibe
08/3/2006
Mira lo que puedes hacer es una tabla y dentro de esa tabla todo el contenido. Despues centras la tabla.
<center><table></table></tenter>. Así la centras horizontalmente. Si lo que quieres es centrarla verticalmente <table vspace="valor">.
Por: Eloi de San Martin
08/9/2006
Existe una manera de centrar un objeto simplemente usando sus propiedades CSS:

http://www.programacionweb.net/articulos/articulo/?num=461
Por: ceci
11/10/2006
Hola les cuento que a mi si me funcionó ese código pero porque solo era una tabla con imágenes la que necesitaba centrar, eso si tuve que meter todo en una tabla. Muchas gracias!!!!
Por: David
04/5/2007
Hola, yo he encontrado otra solución:

http://www.jairoblanco.com/css_hojas_estilo/centrar-elementos-con-css_47/

henry_q...
debes usar divs y css
15/10/2009
La mejor solución es usar divs y css, aqui un excelente ejemplo:

http://crea-t.net/blog/?p=7

Saludos.

Volver al árbol de categoríasVolver al árbol de categorías

Donaciones
Si piensas que te hemos ayudado y merecemos tu apoyo económico...