Centrar verticalmente con CSS; 6 formas diferentes de lograrlo

15 julio, 2011

Alineado vertical CSS @katharsix

A veces, por motivos de estética, nos viene bien alinear verticalmente un sitio web.

En los tiempos en que las webs se hacían con tablas, esto era sencillo gracias a la propiedad vertical-align de las mismas; pero con la aparición de las capas (Divs) y desaparición de las tablas esta propiedad murió.

Hoy traigo 6 formas diferentes de alinear una web verticalmente con CSS sin morir en el intento, totalmente validadas por el W3C y que dará ese toque que le falta a tu web.

Método del alto de linea (Line-height method)

Aunque es un método que sólo funciona con una línea de texto, puede ser útil para mostrar, por ejemplo, nuestro último tweet (muy de moda) en una única línea.

La forma de implementarlo sería la siguiente:

<div id="padre">
	<div id="hijo">Texto alineado verticalmente.</div>
</div>
#hijo {
	line-height: 200px; //Damos 200px de alto para notar el efecto
}

Y el resultado sería tal que:
alinecion texto vertical @katharsix

Como véis le damos 200px por darle un valor, puede ser el que tú quieras. Nosotros hemos escogido esa medida para que se note bien el efecto.

Este método funciona en todos los navegadores, aunque es sólo aplicable sólo a una línea de texto.

Ver Demo

El método de la tabla CSS (CSS Table method)

Comentaba al principio de la entrada sobre el tiempo de las tablas y el posicionamiento vertical con vertical-align.

Este método se basa en eso, pero sin hacerlo con tablas como tal.

Lo que hacemos es tratar, mediante CSS, a una serie de capas como tablas HTML o celdas de tabla; con esto lograremos que el navegador vea dichas divs como tablas y podamos utilizar la propiedad vertical-align sobre ellas.

Debemos tener clara la idea de que las tablas CSS no son lo mismo que las tablas HTML.

La implementación sería así:

<div id="padre">
	<div id="hijo">Contenido a centrar aquí.</div>
</div>
#padre {
	display: table;
	height:200px;
}
#hijo {
	display: table-cell;
	vertical-align: middle;
}

La explicación es más o menos lo que expliqué arriba; le otorgamos a la capa padre la propiedad display:table y a la capa hijo display:table-cell. Esto hará que la capa padre sea interpretada por el navegador como una tabla y la capa hijo como una celda de tabla.

A su vez, la capa hijo tendrá un vertical-align: middle para que se produzca el alineado vertical.

También tenemos en cuenta que en esta ocasión el alto de la capa va en el elemento padre.

Me gustaría advertir que este método no funciona por sí mismo en versiones antiguas de Internet Explorer, por lo que hay que “forzarlo” añadiendo un display:inline-block al elemento hijo.

El resultado:
CSS Table vertical align @katharsix

Ver Demo

Posición absoluta y margen negativo (Absolute Positioning and Negative Margin)

Este método sólo funciona para elementos de tipo bloque (perfecto para las capas) y también funciona para todos los navegadores.

Implementación:

<div id="padre">
	<div id="hijo">Contenido alineado aquí.</div>
</div>
#padre {
	position: relative;
}
#hijo {
	position: absolute;
	top: 50%;
	left: 50%;
	height: 30%;
	width: 50%;
	margin: -15% 0 0 -25%;
}

Si nos fijamos en el CSS (El HTML no varía con los ejemplos anteriores) vemos que lo primero aplicamos un posicionamiento relativo a la capa padre y una posición absoluta al elemento hijo.

Después fijamos los valores top y left del elemento hijo al 50% (centro del elemento padre). Esto aún no es correcto.

Para que sea correcto necesitamos mover el elemento hijo hacia arriba (la mitad de su altura) y a la izquierda (la mitad de su ancho) para que lo que quede en el centro del elemento padre sea el centro del elemento hijo. Para esto necesitamos saber el tamaño de la capa (ancho y alto) y así poder restar el margen correspondiente.

Para hacer esto le damos un margen negativo al elemento hijo tanto superior como izquierdo igual a la mitad de su alto y su ancho respectivamente:

margin: -15% 0 0 -25%;

Tened en cuenta que habíamos dado un ancho del 50% y un alto del 30%, por eso el margen superior es del -15% (la mitad de 30) y el margen izquierdo es del -25% (mitad del ancho).

Como vais a poder ver en el demo, lo que centramos es una capa y no el texto en sí. Para esto habría que hacer otras técnicas que nos permitiesen centrarlo verticalmente. Nos hemos interesado en centrar la capa.

El resultado visible es:
alineacion vertical posicion absoluta y margen negativo @katharsix

Ver Demo

Posición absoluta y extensión (Absolute Positioning and Stretching)

Tal y como hacíamos con el método anterior, vamos a aplicar una posición relativa al elemento padre y una absoluta al elemento hijo.

En el código que os muestro, utilizo el método para centrar tanto vertical como horizontalmente:

<div id="padre">
	<div id="hijo">Contenido aquí.</div>
</div>
#padre {
	position: relative;
}
#hijo {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	width: 50%;
	height: 30%;
	margin: auto;
}

La idea de este método es intentar que el elemento hijo se centre indicando un top, bottom, right y left con valor 0.

Como el elemento hijo es más pequeño que su elemento padre no podrá alinear las 4 esquinas.

Indicando un margen automático a las 4 esquinas haremos que los márgenes opuestos (izquierda-derecha y arriba-abajo) sean iguales y mostrarán nuestra capa hijo en el centro del elemento padre.

¿Se entiende la idea?

Desgraciadamente, Internet Explorer 7 o inferiores nos juegan una mala pasada y no quiere mostrar nuestro CSS adecuadamente. Puede hacer que el contenido del elemento hijo crezca y termine por ocultarse.

El resultado final sería este:
alineacion vertical posicion absoluta y margen negativo @katharsix

Ver Demo

Mismo padding superior e inferior (Equal Top and Bottom Padding)

En el anterior método le dejabamos al navegador la tarea de calcular automáticamente los márgenes del elemento hijo para que sus opuestos fueran idénticos.

En este método haremos algo similar, pero lo indicaremos nosotros.

<div id="padre">
	<div id="hijo">Contenido aquí.</div>
</div>
#padre {
	padding: 5% 0;
}
#hijo {
	padding: 10% 0;
}

Con este CSS estamos especificando para ambos elementos (padre e hijo) el padding superior e inferior que deben tener.

Este método puede dar mucho juego si usamos medidas relativas para que se adapte automáticamente al alto de su contenido y demás, pero no es el tema de esta entrada. Realizaremos un ejemplo con medidas absolutas.

El resultado:
posicionamiento vertical css padding @katharsix

Ver Demo

Div flotante (Floater Div)

Este último método requiere un div vacío que flota y se utiliza para controlar dónde se encuentra el elemento hijo dentro del documento. El elemento flotante viene antes que el elemento hijo en el documento HTML.

<div id="padre">
	<div id="flotante"></div>
	<div id="hijo">Contenido aquí.</div>
</div>
#padre {height: 250px;}
#flotante {
	float: left;
	height: 50%;
	width: 100%;
	margin-bottom: -50px;
}
#hijo {
	clear: both;
	height: 100px;
}

Haremos que la capa flotante flote (valga la redundancia) a la izquierda (o derecha, da lo mismo) y le daremos un alto del 50% de su elemento padre. Esto hará que quede “ocupada” la mitad superior del elemento padre.

Como este elemento flotante es suprimido del flow normal del documento necesitamos limpiar el elemento hijo. De ahí que utilicemos clear:both, aunque realmente sólo necesitamos limpiar en el sentido que hicimos flotar la capa vacía.

La parte superior del elemento hijo quedará inmediatamente debajo de la parte inferior del elemento flotante. Necesitamos que el elemento hijo suba la mitad de su altura; para ello utilizamos un margen negativo como vimos anteriormente.

En esta ocasión el margen negativo lo aplicamos a la parte inferior de la capa flotante.

Este método funciona en todos los navegadores.

Resultado:
Alineacion vertical css div flotante @katharsix

Ver Demo

Fuente

Categorías: Miscelánea

Etiquetas: ,

Si te ha resultado útil el contenido, puedes invitarme a una caña (o lo que quieras :-D).

11 comentarios en “Centrar verticalmente con CSS; 6 formas diferentes de lograrlo”

  1. Alexis Advance
    2 octubre, 2012 a las 21:25

    Excelente artículo. Es bueno tener todas estas herramientas a mano en un mismo artículo.

    Por cierto, al final del último ejemplo dice «Este método funciona en todos los buscadores». Supongo que la última palabra del texto citado era «navegadores».

    ¡Saludos!

  2. 25 marzo, 2013 a las 18:17

    Excelente post! justo lo que he estado buscando desde hace un tiempo. Saludos!

  3. 9 abril, 2013 a las 3:13

    Gracias!

  4. 21 agosto, 2013 a las 16:19

    Excelente Post, me ha servido muy bien conocer mas formas para centrar, Saludos !!!

  5. Mónica Cid
    21 agosto, 2013 a las 20:19

    Muy buen Post!! Que gran ayuda!

  6. 2 septiembre, 2013 a las 22:21

    Gracias, me sirvio, me parece que faltaron algunas técnicas, sería genial que las agregues.

  7. Julio
    30 septiembre, 2013 a las 23:25

    Muy bueno gracias

  8. Ignacio
    16 octubre, 2013 a las 18:25

    Muy bueno como vemos a css le está faltando una propiedad para dicho fin, algo similar a text-align:center pero con estas alternativas se puede encarar igual

  9. Elio Yair Castro Toraya
    24 octubre, 2013 a las 3:29

    Excelente la informacion!
    Muchas gracias. Sigue asi!

  10. Lionela
    14 enero, 2014 a las 20:21

    Hola estoy haciendo una web en html5. Tengo un contenedor, dentro de él un section y dentro de él un div, como hago para que el alto de section se ajuste de acuerdo al contenido del div?? Gracias

  11. Ariel
    23 marzo, 2014 a las 17:58

    Muy util, gracias ^^

Comenta esta entrada

Puedes utilizar las siguientes etiquetas XHTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>