Métodos para centrar verticalmente con CSS

El centrado vertical de los elementos con CSS, es un tema que a menudo causa problemas a los desarrolladores y diseñadores web que desean modificar el alineado de una estructura.

La manera en que este alineado se aplicaba en el pasado y las malas costumbres que perduraron con el tiempo han hecho que resulte difícil para un diseñador el uso de CSS para lograr esta funcionalidad.

Muchos son los que desconocen la manera correcta de lograr este alineado con CSS, por lo que recurren al uso de las tradicionales pero malditas tablas que sólo vienen a entorpecer nuestro DOM.

Para todos nosotros que nos hemos visto envueltos en alguna problemática con el centrado vertical, traemos en este artículo una variedad de métodos que nos ayudarán a lograr el alineado de manera fácil y sencilla.

Primero que nada debemos tener conciencia de que quizás un método sólo sea el adecuado para unos casos y no para todas las situaciones, debemos saber reconocer y apreciar la variedad, es por ello que en este artículo se van a exponer varios métodos y no uno en absoluto.

El primero de estos métodos es “vertical-align”, que no siempre funcionará, pero nos ayudará a comprender mejor el centrado vertical en general.

Vertical-align

El hecho de que el centrado horizontal con CSS resulta bastante fácil de aplicar, hace pensar a la mayoría que el centrado vertical será cuestión de una simple sentencia.

Aunado a esto, el uso de tablas nos ha dicho que con la aplicación de un atributo “valign” podemos centrar de manera vertical nuestro contenido, es por ello que muchos ven a “vertical-align” como la solución a su problema pensando que esta función centrará automáticamente cualquier elemento ya sea inline o de bloque.

Pero les recuerdo, esto no son tablas, estamos manejando una estructura DOM que tiene elementos de comportamientos muy independientes y “vertical-align” desgraciadamente no tiene influencia sobre los elementos de bloque, únicamente funciona con elementos inline y por supuesto para el contenido en tablas, por lo que es la alternativa CSS correcta para el famoso “valign”.

En base a esto podemos establecer que si aplicamos dicho atributo a una elemento en línea como una imagen, si podremos obtener el resultado deseado.

img { 
    vertical-align: middle;
}  

Los valores válidos para esta propiedad son baseline, sub, super, top, text-top, middle, bottom, text-bottom, length, o un valor en porcentaje.

Pero si lo que queremos es aplicar un centrado vertical a elementos de bloque entonces debemos recurrir a otra clase de métodos, y el método que elija dependerá de lo que usted está tratando de centrar en relación a su elemento contenedor.

Line-Height

Este método funcionará cuando queramos alinear verticalmente una sola línea de texto.

Todo lo que necesitamos hacer es establecer una altura para la línea sobre el elemento que contiene el texto y para ello usaremos la propiedad “line-height”, recordando que dicha altura debe ser mayor al tamaño de la fuente para que tenga el efecto deseado.

Por defecto el espacio proporcionado se repartirá de manera equitativa para la parte superior e inferior del texto por lo que este se centrará de manera vertical. En caso de que esta modificación no tenga el efecto deseado también se puede modificar la altura del elemento contenedor para igualarla a la de la línea de texto.

Es entonces que si tenemos un código HTML que luzca de la siguiente manera:

<div id="divContenedor">
    <div id="divHijo">Texto de prueba</div>
</div>

Y aplicamos el siguiente estilo:

#divHijo {
 line-height: 400px;
}

Lograremos apreciar “Texto de prueba” de manera centrada verticalmente. Este método funciona en todos los navegadores, el único problema de esto es que sólo servirá para una sola línea de texto si agregamos una segunda o tercera línea el efecto se verá afectado y tendremos que usar un método diferente.

En este caso yo di un valor de 400 píxeles para la altura, pero se puede proporcionar cualquier valor que se crea conveniente.

Centrar una imagen con line-height

Muchos se podrán haber planteado la cuestión de que si este método tiene efecto sobre imágenes, y afortunadamente así es. Si aplicamos la propiedad a una imagen obtendremos el mismo resultado, sólo con una variación, debemos agregar otra línea a nuestro código CSS.

Se establece el “line-height” como lo hicimos anteriormente, el cual tendrá que ser mayor que la altura de la imagen, y ajustamos el “vertical-align” dando un valor de “middle” para la imagen. En base a esto nuestro código HTML quedaría de la siguiente manera:

<div id="divContenedor">
    <img src="imagen.png" alt="imagen" />
</div>

Mientras que el código CSS lucirá así:

#divContenedor {
 line-height: 200px;
}
#divContenedor img {
 vertical-align: middle;
}

Uso de tablas CSS

No te asustes al oír la palabra Tabla, en esta ocasión no nos estamos refiriendo a las tablas comunes que generalmente se usaban para darle forma a un layout en el pasado, lo que haremos en esta ocasión es utilizar CSS para mostrar elementos como tablas y celdas para después utilizar la propiedad vertical-align y así centrar el contenido.

Si tenemos una estructura como la siguiente:

<div id="divContenedor">
    <div id="divHijo">Contenido de la tabla</div>
</div>

Y aplicamos un CSS como el siguiente:

#divContenedor {
    display: table;
}
#divHijo {
 display: table-cell;
 vertical-align: middle;
}

Obtenemos un div padre que se muestra como tabla y un div hijo que hace lo propio como celda de dicha tabla. A partir de este momento podemos utilizar la propiedad “vertical-align” a la cual le damos el valor de middle para añadir el alineado vertical.

A diferencia del método anterior, el contenido puede ser dinámico y va a crecer en base a lo que se coloca dentro del div. La desventaja de este método es que no funciona en versiones antiguas de IE, aunque hay una solución, que consiste en añadir “display: inline-block” al elemento secundario.

Posición absoluta y margen negativo

Este método puede ser utilizado sobre elementos de tipo bloque y funciona en todos los navegadores, incluyendo Internet Explorer.

Para su correcto funcionamiento se requiere que se ajuste la altura del elemento que se desea centrar, proporcionándole a su vez una posición de tipo absoluta y márgenes negativos para lograr el centrado.

Por ejemplo si quisiéramos centrar tanto de manera horizontal como vertical un elemento de tipo “div” que se encuentra dentro de otro que actúa como contenedor, tendríamos que agregar un código CSS como este:

#divContenedor {
    position: relative;
}
#divHijo {
    position: absolute;
    top: 50%;
    left: 50%;
    height: 30%;
    width: 50%;
    margin: -15% 0 0 -25%;
}

El cual tendría efecto sobre esta estructura:

<div id="divContenedor">
    <div id="divHijo">Contenido de prueba</div>
</div>

Lo primero que hacemos en nuestra sentencia CSS es definir la posición de ambos elementos, se le da una posición relativa al contenedor y al hijo se le da una absoluta. La posición absoluta indicará que el elemento interno estará posicionado en base a su primer elemento antecesor, en este caso “divContenedor”.

A continuación establecemos los valores para “top” y “left” en 50%, lo que ubicará a “divHijo” con un margen superior e izquierdo que equivaldrá a la mitad del tamaño del contenedor. Esto en teoría se consideraría el centro, pero el elemento no lucirá totalmente centrado si lo manejamos así, puesto que la única parte de “divHijo” que esta en el centro es la esquina superior izquierda.

Para retocar esto, debemos mover a “divHijo” de tal manera que quede centrado, para ello damos una anchura de 50% y una altura de 30%, de esa manera vamos a conocer la altura y anchura de nuestro elemento hijo, para finalmente aplicar los márgenes negativos que nos darán el centrado esperado.

A diferencia de los otros métodos que observamos en el artículo anterior éste es el primero para elementos de bloque, sin embargo se debe de manejar con cuidado pues el contenido puede superar a su contenedor y eso causa que visualmente desaparezca, por lo que es fundamental conocer bien la altura y anchura del elemento.

Posición absoluta y estiramiento

Al igual que con el método anterior, éste empieza por establecer el posicionamiento de los elementos padre e hijo como relativo y absoluto, respectivamente, pero a partir de ahí las cosas son diferentes.

En lo que consiste este método es tratar de conseguir que el elemento hijo se extienda a todo bordes del elemento contenedor. Para lograr esto, se recurre a las propiedades “top”, “bottom”, “right” y “left” las cuales son establecidas con un valor de 0 en el estilo de “divHijo”. Debido a que nuestro elemento hijo es menor que el elemento contenedor no puede abarcar los cuatro bordes.

Si a esto le añadimos un margen automático para los cuatro lados, lograremos crear el efecto de centrado vertical ya que los márgenes que se oponen serán iguales, obteniendo un código CSS final como este:

#divHijo {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: 50%;
    height: 30%;
    margin: auto;
}

Desgraciadamente este método tiene dos desventajas, ya que no funciona para Internet Explorer en versiones menores a la 7 y al igual que con el método anterior si el contenido crece mucho puede causar su ocultamiento.

Padding

Este método consiste en dejar la responsabilidad del ajuste automático de márgenes del elemento hijo al navegador, proporcionando un padding tanto para el contenedor como para el hijo y así igualar las distancias.

#divContenedor {
    padding: 5% 0;
}
#divHijo {
    padding: 10% 0;
}

Con este CSS proporcionamos un padding superior e inferior para ambos elementos. Al proporcionar dichas propiedades para “divHijo” nos estamos asegurando de que estará verticalmente centrado, mientras que el padding proporcionado al padre asegura que el hijo estará centrado en base al contenedor.

Este método funciona en cualquier navegador, la desventaja es que dependiendo de los detalles de su proyecto es posible que tenga que hacer un poco de matemáticas para calcular el padding correcto para centrar su elemento.

Div flotador

Este es el último método que veremos, para poder llevarlo a la práctica requerimos de un div vacío que se encuentre flotando en nuestro DOM. Dicho div será el encargado de controlar la posición de nuestro elemento hijo.

Para lograr tal efecto necesitamos colocar nuestro div flotador a una posición fija ya sea a la izquierda o derecha dentro del div contenedor, después le damos una altura que abarque el 50% del div contenedor y una anchura del 100%, lo que hace que se llene toda la mitad superior del elemento padre.

Código html:

<div id="divContenedor">
    <div id="divflotador"></div>
    <div id="divHijo">Contenido de prueba</div>
</div>

Código css:

#divContenedor {
    height: 250px;
}
#divflotador {
    float: left;
    height: 50%;
    width: 100%;
    margin-bottom: -50px;
}
#divHijo {
    clear: both;
    height: 100px;
}

Debido a que el div agregado se encuentra flotando, no esta considerado dentro de la estructura normal del documento, es por ello que necesitamos aplicar la propiedad “clear” en el elemento hijo.

El borde superior del div hijo ya debe estar inmediatamente por debajo del borde inferior de la div flotante. Es necesario hacer llegar el elemento hijo por un monto igual a la mitad de su altura y para ello hemos establecido un margen negativo de fondo en el div flotante.

Este método también funciona en todos los navegadores. La desventaja es que requiere un div vacío y que conozcamos la altura exacta del elemento que actuará como hijo.