Publicado por alvlin, el ¿Cómo hacer para centrar verticalmente un bloque (div, párrafo, imagen, lo que sea) usando CSS?
En teoría (al menos así lo creo) debería bastar una variación del método que se usa para el centrado horizontal: especificar el ancho y luego poner tanto margin-left como margin-right a auto.
Pero no es así. Hacer eso simplemente no funciona.
¿Qué se debe hacer entonces para centrar un elemento de la página?
Hice algunas pruebas en Opera 9.2, Internet Explorer 7, Firefox 2 y Konqueror 3.5.4.
Estos son los resultados:
Método 1:
La forma más fácil, y la primera que se me ocurre, es repartir pasa por fijar la altura del elemento, y repartir manualmente el resto de la altura con margin-top y margin-bottom. Es decir, si el elemento tiene una altura de 90%, poner tanto margin-top como margin-bottom a 5% cada uno. En realidad no hace falta especificar las dos propiedades, basta con especificar el margen superior.
Un ejemplo puede verse acá.
El problema con este método es que estira
al elemento contenedor cuando el elemento interior no entra con su margen, y por lo tanto no es muy amigable a la hora de acomodar otras cajas en la página.
También es importante notar que si el margen especificado no alcanza para cubrir el 100% de la altura (por ejemplo, 70% de altura y 5% de margen), el elemento no queda centrado, aunque margin-top y margin-bottom sean iguales.
Por otro lado, si el elemento contenedor no es demasiado grande, puede centrarse el contenido unicamente especificando los márgenes, sin especificar la altura.
Por último, este método falla completamente si el contenedor tiene una altura fija, que no depende del contenido. A menos claro, que también esta altura sea conocida de antemano, ya que sabiendo este dato se pueden acomodar los márgenes para que quede centrado.
Método 2:
Una variante del anterior, que en vez de jugar con los márgenes usa el posicionamiento absoluto, y las propiedades top/bottom. Siguiendo el caso anterior, si el elemento tiene 90% de altura, poner top a 5% y bottom a 5% (o solamente top).
Para el caso de elementos centrados verticalmente con respecto a otros elementos, el posicionamiento a elegir es relative en vez de absolute
La particularidad de este método es que si crece el elemento padre, el elemento hijo (centrado) también crece. Esto implica que este método no falla como el anterior si el elemento contenedor tiene altura fija.
Puede ser útil para elementos con contenido variable, aunque en otros casos la pérdida de control sobre la altura del elemento centrado puede perjudicar al diseño.
Método 3:
El método más complejo y más preciso.
Puede verse un ejemplo aquí.
Suponiendo que el elemento que se quiere posicionar tiene el id "centrado", el CSS necesario para centrarlo es:
#centrado {
position : absolute;
/* se coloca el bloque a una distancia vertical al borde superior
de la página igual a la mitad de la altura total de la misma. */
top : 50%;
/* se da la altura correspondiente al elemento */
height : 400px;
/* se especifica como margen superior la mitad de la altura
del elemento */
margin-top : -200px;
}
Este método es el más adecuado para diseños complejos, ya que es muy específico en la ubicación del elemento con respecto a su elemento padre. Aunque el padre crezca, el hijo siempre queda centrado. Esto puede verse claramente en el ejemplo, centrando de esta manera se mantiene el control total sobre las medidas del bloque contenedor y del bloque contenido.
En mis pruebas este método funcionó en los 4 navegadores, con un detalle: en ninguno de ellos funcionó cuando las medidas fueron porcentajes. Sí funcionó muy bien con medidas en píxeles y en em
, pero no con porcentajes.
De todas formas, dada la precisión en las medidas que requiere, creo que este no es un detalle muy importante.
Otros métodos
Mikmoro, un verdadero experto en esto de jugar con CSS, ha recopilado (creado, investigado, se le han ocurrido) 3 métodos ligeramente diferentes para alinear un bloque verticalmente, utilizando la propiedad display de CSS, con el valor table-cell (celda de tabla). La particularidad de este valor de display es que hace que la propiedad vertical-align se comporte de forma similar a como uno espera que se comporte.
Estos métodos están recopilados en el sitio: Recopilación de recursos CSS.
Conclusión
¿Cómo centrar verticalmente con CSS?
es una de las preguntas más vistas en los foros sobre maquetación con CSS.
Estos 3 métodos presentados no son nuevos, son métodos que todos hemos usado alguna vez. Intenté mencionar las ventajas y desventajas de cada uno, e intenté también ayudar en la decisión de cuál usar según el diseño que se quiera realizar.
Si queda alguna duda de mis descripciones (que seguramente alguna quedará), creo que los ejemplos ayudan a disiparlas. De todas formas, los comentarios están abiertos.
¿Qué método usas?
Enlaces relacionados
- Ejemplo: Método 1
- Ejemplo: Método 2
- Ejemplo: Método 3
- W3C - CSS
- Sidar - traducción de la especificación CSS 2.1
16/10/2008, a las 11:55
Vaya que la página ha cambiado desde la última vez que la vi, y en verdad me ha encantado. Lo primero que me llamó fue CSS, claro, y principalmente este código, que muchas veces es muy solicitado y poco conocido.
Yo siempre he usado la tercera opción, me parece sencilla y perfectamente funcional, definitivamente la que yo recomiendo, además que es más común usar valores no porcentuales. Buen trabajo (¿Aquí como uso los emoticonos? Tendré que hacerlo a la W3C…) .