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>

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

Comentarios

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/

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

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">.

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

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!!!!

erik

07/4/2007
hola me funciono el codigo ya que era una tabla tambien.. y tenia divs ese era el problema.. gracias ^^

David

04/5/2007
Hola, yo he encontrado otra solución:

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

Mon

06/9/2007
Saludos a todos,

La solución comentada dos comentarios atrás no es válida en todos los casos: falla si la capa es de dimensiones mayores a las del navegador (parte superior e izquierda de la capa queda oculta e inaccesible).

Pueden verlo en el ejemplo del comentario citado (http://www.programacionweb.net/ejemplos/53.htm) reduciendo el tamaño de la ventana del navegador.

Quizás se piense que ese caso es extremo, pero imaginen un flash creado para una resolución de 1024 y visto en un monitor de 800x600.

En somosespartanos.com mostramos una solución efectiva que pasa por aplicar (mediante javascript) el famoso top:50% y margin-top negativo SOLO cuando sea necesario (ventana del navegador mayor al tamaño de la capa).

Podeis ver el código y descargarlo en

http://www.somosespartanos.com/2007/07/24/centrar-capa-div-horizontal-y-verticalmente-por-javascript/

Un saludo desde Esparta ;)

Flanagan

25/3/2008
Aqui esta este codigo que es muy interesante y funcona:

<html>

<head>

<title>Centrar SWF con CSS</title>

<style type="text/css">

<!--

body {

margin-left: 0px;

margin-top: 0px;

margin-right: 0px;

margin-bottom: 0px;

}

.centrado {

position: absolute; /*Posicionamiento absoluto*/

top: 50%; /*Desde arriba, colocar al 50% de la pantalla*/

left: 50%; /*Desde la izquierda, colocar al 50% de la pantalla*/

height: 400px; /*Le ponemos el valor del alto*/

width: 500px; /*Le ponemos el valor del ancho*/

margin-top: -200px; /*Restamos la mitad de alto para centrarlo verticalmente*/

margin-left: -250px; /*Restamos la mitad de ancho para centrarlo horizontalmente*/

background-color: #00FF00; /*Este es el kolor de fondo, para ke el ejemplo sea visible*/

}

-->

</style>

</head>



<body>

<div class="centrado">

Hola, esta es la kapa kontenedor ke kedara centrada.

</div>

</body>

</html>

Pablo

04/4/2009
"Ariel" tiene razón:

El alineamiento vertical (valign para una tabla) no funciona si lo haces con la etiqueta <!DOCTYPE BLA BLA...> al inicio del documento ya que no se tiene en cuenta.
Si eliminamos <!DOCTYPE...> es simple, solamente con una tabla y y poniendo valign="middle" funciona.

henry_quevedo-534018

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

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

Saludos.

Mario

22/11/2010
problema!
por que cuando trato de alineral al centro style="text-align: center" no surte efecto, esto tratando de alinear al centro un menu pero nada! tuve que usar el <center> !!
al igual que en ciertas lineas de codigo si aplico la misma alineacion con CSS dentro de un <span> tampoco surte efecto! no quiero usar el <center> y he tenido que hacerlo!. Gracias por su ayuda!. followtheleader_310@hotmail.com es mi correo por si me pueden ayudar! :D

Carlos

01/3/2012
Alinear con CSS
http://css.flepstudio.org/en/css-tutorials/centered-vertical-horizontal-align.html

ismael

27/4/2013
Centrar el texto verticalmente
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
</head>
<body >
<table width="100%" height="100%" cellpadding="0" cellspacing="0">
<tr>
<td width="100%" height="100%" align="center" valign="middle" >
<table width="800" height="500">
<tr>
<td>
AQUI VA EL CONTENIDO QUE SE QUIERE CENTRAR
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
FAQ relacionadas

Para ver más FAQ relacionadas accede a las categorías:

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