6 trucos CSS para alinear el contenido verticalmente

En este artículo vamos a hablar de la alineación vertical en CSS. CSS todavía no ha proporcionado una manera oficial para centrar el contenido verticalmente dentro de su contenedor. Es un problema que probablemente te ha frustrado y yo creo que a muchos de los desarrolladores web de todo el mundo. Pero no hay que temer, en este post, vamos a ver algunos trucos que pueden ayudarte a imitar el efecto.

Sin embargo, estos trucos pueden tener limitaciones, y puede que tenga que utilizar más de un truco para completar la ilusión. Si sabes de algún otro truco, háznoslo saber en los comentarios.

1. Utilice Posicionamiento absoluto

El primer truco que vamos a ver aquí utiliza la propiedad position. Usted tiene dos <div>, uno es el contenedor, el otro, el elemento secundario que contiene el contenido.

Primero vamos a definir la posición del elemento contenedor en relative, entonces ponemos la posición del elemento hijo en absolute. Esto nos permite colocar libremente al otro lado del contenedor.

Para alinear verticalmente, mover la posición de elemento secundario de la parte superior, a la mitad de la altura del recipiente, y tire hacia arriba por medio de la anchura del elemento hijo. Aquí está la salida y en seguida el código:

<div class="container">
	<div class="content">I'm aligned vertically!</div>
</div>

* {
    padding: 10px 20px;
}
.container {
	position: relative;
	height: 6em;
    width: 300px;
	background: #e5e6e5;
    margin-left: auto;
    margin-right: auto;
}
.content {
	position: absolute;
    color: #fff;
	top: 3em;
	line-height: 3em;
	margin-top: -1.5em;
	background: #7396a1;
}

2. Utilice CSS3 Transform

CSS3 Transform ha hecho que sea fácil poner el contenido en el centro de un div. CSS3 Transform, a diferencia de la propiedad position, no afectará la posición de otros elementos dentro del mismo contenedor.

Asumiendo que tenemos la misma estructura HTML como el ejemplo anterior - uno de los padres y un elemento hijo el cual le ponemos a 50% de la parte superior y con uso de CSS Transform da una traducción de -50%. Y ahí tienen el resultado y su respectivo código.

<div class="container">
    <div class="content">I'm aligned vertically!</div>
</div>

.container{
	height: 100px;
	background: #7396a1;
    color: #fff;
    width: 300px;
    margin-left: auto;
    margin-right: auto;
}
.content {
    text-align: center;
	position: relative;
	top: 50%;
	-webkit-transform: translateY(-50%);
	-o-transform: translateY(-50%);
	transform: translateY(-50%);
}

Tenga en cuenta que CSS3 Transform no funcionan en Internet Explorer 8 y anteriores. Es posible que desee utilizar cualquiera de los otros métodos aquí como alternativa para estos navegadores.

3. Utilice Padding

También podemos utilizar padding para crear una ilusión de alineación vertical. Para ello, basta con establecer la parte superior y la parte inferior de padding igualmente, como sigue:

<div class="container">
	<div class="content">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore facere, minus pariatur.</div>
</div>

.container{
	background-color: #7396a1;
    color: #fff;
    width: 300px;
    margin-left: auto;
    margin-right: auto;
}
.content {
	padding: 10% 50px;
}

Este truco es adecuado para cuando no se establece el contenedor en un ancho fijo, acaba de establecer el ancho en auto.

4. Utilice Line Height

Si tiene una sola línea de contenido de texto dentro de un contenedor, puede alinear el texto verticalmente utilizando la propiedad line-height. Ajuste el valor de line-height de aproximadamente la misma que la altura del contenedor, y verá la siguiente salida.

<div class="container">I'm aligned vertically!</div>

.container {
	line-height: 100px;
	background-color: #7396a1;
    padding: 0 30px;
    width: 300px;
    margin-left: auto;
    margin-right: auto;
    color: #fff;
}

Recuerde que este truco sólo funciona con una sola línea de texto. Si el contenido se rompe en dos o más líneas, el espacio entre cada línea sería como especificamos en el line-height, que nos da demasiado espacio en blanco.

5. Utilice CSS Table

A muchos desarrolladores les gusta usar esta propiedad, CSS Table es un buen truco para aplicar la alineación vertical. Funciona en navegadores antiguos como Internet Explorer 7. Este método se realiza estableciendo el elemento contenedor la propiedad de table, mientras que el elemento hijo se va a mostrar como table-cell luego use la propiedad vertical-align para centrar el texto verticalmente.

<div class="container">
	<div class="content">I'm aligned vertically!</div>
</div>

.container {
	display: table;
	background: #7396a1;
	height: 100px;
    color: #fff;
    margin-left: auto;
    margin-right: auto;
}
.content {
	display: table-cell;
	vertical-align: middle;
    padding: 0 30px;
}

6. Utilice Flexbox

El último método para el centrado vertical es mediante el uso de Flexbox. Flexbox es un nuevo módulo en CSS3. Ofrece un método más sencillo para alinear el contenido. Para centrar el contenido verticalmente en la caja de la Flexbox, simplemente añada align-items: center; de la siguiente manera, y eso es todo.

<div class="container">
	<p>I'm aligned vertically!</p>
</div>

.container{
	display: flex;
	align-items: center;
	height: 10em;
	background: #7396a1;
    width: 300px;
    color: #fff;
    margin-left: auto;
    margin-right: auto;
}

Tenga en cuenta que algunos navegadores no soportan toda la funcionalidad FlexBox, solo algunas características parciales de apoyo del módulo. Por lo tanto, similar al truco con CSS3 Transform, asegúrese de que cuenta con alguna alternativa de soporte para estos navegadores.

Conclusión

Con Posicionamiento absoluto, CSS3 Transform, Padding, Line Height, CSS Table y Flexbox, podrás alinear verticalmente un div, dependerá de tus necesidades y gustos cuál de estas quieres utilizar, solo recuerda que para algunos casos deberás utilizar más de una opción para dar soporte a todos los navegadores.

Deja tus comentarios y no olvides compartir el artículo en tus redes sociales!!!