Alinear elementos verticalmente en CSS

Una tarea muy recurrente en el diseño web es intentar centrar elementos en un contenedor. Si esto se resuelve de manera sencilla cuando el elemento debe alinearse en la horizontal, no ocurre así si deseamos alinearlo en la vertical. Algo tan entendible como que al situar la propiedad vertical-align con valor middle en el contenedor de un elemento este último quede centrado, no funciona en todos los casos. Esta propiedad sólo centra verticalmente un elemento si su contenedor es un elemento en línea o

la celda de una tabla.

En esta entrada intentaremos describir diferentes métodos para centrar elementos verticalmente en un contenedor usando para ello solamente CSS.

Alinear un texto verticalmente usando la propeidad line-height

Esta técnica sólo se puede aplicar a un elemento de tipo texto y que conste de una sola línea. Para alinear una línea de texto en la vertical sólo debemos usar la propiedad line-height en el contenedor con un valor igual al de la altura del mismo:

<style>
	#container{
		height: 150px;
		line-height: 150px;
		text-align: center;
		width: 100%;
	}
</style>

<div id="container">
	line-height
</div>

Esta técnica logra que el alto de las líneas de texto dentro del contenedor ocupen la altura del mismo (en este caso 150px), logrando así que una única línea de texto quede perfectamente centrada en la horizontal.

Esta técnica pertenece a la referencia 2.1 de CSS y funciona en todos los navegadores (incluido Internet Explorer 6+). Tiene la ventaja de que es muy fácil de aplicar, tiene una alta retrocompatibilidad y sólo necesitamos declarar un parámetro para que el elemento quede centrado, pero cuenta con una dificultad, y es que sólo es válida para una sola línea de texto, si queremos alinear un párrafo o un elemento que no sea de texto no funcionaría.

Descargar ejemplo

Alinear elementos verticalmente aplicando propiedades display de tablas

Si aplicamos a un elemento la propiedad display con valor table-cell provocará que este se comporte como la celda de una tabla y en estas últimas es posible usar la propiedad vertical-align. Veamos la siguiente estructura:

<style>
	#container{
		height: 150px;
		display: table;
		width: 100%;
	}

	#container .cell{
		display: table-cell;
		text-align: center;
		vertical-align: middle;
	}
</style>

<div id="container">
			
	<div class="cell">
			
		display table-cell

	</div>

</div>

Si al contenedor le aplicamos la propiedad display con valor table y al elemento le aplicamos esta misma propiedad con valor table-cell a efectos de visualización quedará igual que si se construyera una tabla directamente:

<table id="container">
	<tr>
		<td class="cell"></td>
	</tr>
</table>

Por lo tanto si le aplicamos al elemento la propiedad vertical-align con valor middle su contenido quedará centrado:

Esta técnica pertenece a la referencia 2.1 de CSS y funciona en todos de los navegadores (incluido Internet Explorer 8+). Esta técnica también es muy fácil de aplicar, necesitamos aplicar tres parámetros, uno al contenedor y dos al elemento por lo que podemos conseguir relativamente fácil nuestro objetivo. Pero debemos tener en cuenta que el elemento con propiedad display table-cell ocupará todo el tamaño del contenedor (a no ser que se añadan otros elementos con este mismo tipo de display). Por otro lado todos los elementos se comportarán como si pertenecieran a elementos de una tabla por lo que esto puede dificultarnos la maquetación.

Descargar ejemplo

Alinear elementos verticalmente usando posiciones absolutas

Esta técnica permite posicionar un elemento en el centro de un contenedor usando para ello la propiedad position en valor absolute. Este método requiere posicionar el elemento y el contenedor, observemos la siguiente estructura:

<style>
	#container{
		background: #4a3b2a;
		height: 60px;
		left: 50%;
		position: absolute;
		top: 50%;
		width: 160px;
	}

	#container .block {
		background: #e87b24;
		height: 60px;
		left: -50%;
		line-height: 60px;
		position: absolute;
		text-align: center;
		top: -50%;
		width: 160px;
	}
</style>

<div id="container">

	<div class="block">

		position absolute

	</div>

</div>

Como podemos notar, el contenedor y el elemento tienen la propiedad position en absolute. El contenedor tiene situada la propiedad top y la propiedad left con un valor de 50% por lo que su esquina superior izquierda quedará exactamente en el centro del viewport. Sin embargo el elemento que deseamos centrar tiene las propiedades top y left con valor -50%, y como estas propiedades son relativas al ancho y alto del contenedor (que tiene las mismas dimensiones que el elemento), el elemento quedará perfectamente centrado.

Se nos puede ocurrir que por qué no se usa solo un elemento posicionado absolutamente en las posiciones top y left con valor 50% y el valor de margin-left y margin-top en -50%. Pero esto no es posible ya que cuando se asignan propiedades de margin en valores porcentuales, estos son respectivos solamente al ancho del contenedor, nunca al alto de este último ni a las dimensiones del elemento.

Esta técnica pertenece a la referencia 2.1 de CSS y funciona en todos los navegadores (incluyendo Internet Explorer 6+). Cuenta con la ventaja de que se puede aplicar en navegadores muy antiguos por lo que tiene una alta compatibilidad pero cuenta con la dificultad de que el contenedor debe tener las mismas dimensiones del elemento ya que las propiedades left y top cuando se asignan en valores porcentuales son relativas al ancho y alto del contendor. También debemos tener en cuenta que no es una solución muy sencilla ya que necesita de varios elementos para lograr la alineación.

Descargar ejemplo

Alinear elementos verticalmente usando transformaciones CSS3

Cuando se aplican transformaciones CSS3 a un elemento usando valores porcentuales, estos serán respectivos a las dimensiones de dicho elemento no a las dimensiones del contenedor. Esto tiene una ventaja y es que nos permitirá posicionar la esquina superior izquierda de un elemento en el centro de su contenedor y después corregir su posición usando la transformación translate con valores porcentuales, ya que serán relativos a las dimensiones del elemento en sí (a diferencia de la propiedad margin) y logrando de esta manera que quede centrado. Veamos la siguiente estructura:

<style>
	#container{
		height: 150px;
		position: relative;
		width: 100%;
	}
  
	#container .block {
		background: #e87b24;
		height: 60px;
		left: 50%;
		line-height: 60px;
		position: absolute;
		text-align: center;
		top: 50%;
		transform: translate(-50%, -50%);
		width: 160px;
	}
</style>

<div id="container">

	<div class="block">

		transform translate

	</div>

</div>

Como podemos notar, el elemento ha sido posicionado absolutamente con valor top y left en 50%, por lo que su esquina superior izquierda quedará en el centro del contenedor, pero más adelante usamos la propiedad transform aplicando un traslado en x e y con valor -50% y como este porciento es relativo a las dimensiones del elemento el mismo quedará perfectamente centrado.

Esta técnica pertenece a la referencia 3 de CSS y funciona en la mayoría de los navegadores usando los prefijos adecuados; en Internet Explorer es soportada a partir de la versión 9 y no es soportada en Opera Mini. Es una técnica sumamente sencilla de aplicar y no requiere de una estructura complicada pero tiene la dificultad de que si se desea soportar versiones antiguas de los navegadores, Internet Explorer 6, 7 u 8 u Opera Mini, esta técnica no funcionaría.

Descargar ejemplo

Alinear elementos verticalmente usando el Módulo de Caja Flexible (Flexbox)

Podemos centrar un elemento en vertical y horizontal si asignamos a su contenedor las siguientes propiedades relativas al Módulo de Caja Flexible:

<style>
	#container {
        align-items: center;
        display: flex;
		height: 150px;
        justify-content: center;
		width: 100%;
	}
  
	#container .block {
		background: #e87b24;
		height: 60px;
		line-height: 60px;
		text-align: center;
		width: 160px;
	}
</style>

<div id="container">

	<div class="block">

		Flexbox

	</div>

</div>

La propiedad justify-content es la encargada de alinear el bloque en la horizontal y la propiedad align-items en la vertical.

El Módulo de Caja Flexible es un candidato a recomendación de la W3C desde octubre de 2017. Es soportado por la mayoría de los navegadores pero es soportado con muchos errores en la mayoría de las versiones de Internet Explorer. En el caso específico de este ejemplo, solo es compatible con versiones de Internet Explorer 11+. Pero es posible emular este ejemplo en Internet Explorer 10, para ello es necesario remplazar la propiedad justify‑content por ‑ms‑flex‑pack y la propiedad align‑items por ‑ms‑flex‑align.

Descargar ejemplo