6 trucos de CSS para alinear el contenido verticalmente

, uno es el contenedor, el otro, el elemento secundario que contiene el contenido.

Primero estableceremos la posición del elemento contenedor en relativo, luego estableceremos la posición del elemento hijo en absolute . Esto nos permite ubicarlo libremente en el contenedor.

Para alinearlo verticalmente, mueva la posición del elemento secundario desde la parte superior, a la mitad de la altura del contenedor, y tire de él hacia arriba a la mitad del ancho del elemento secundario. Aquí está el resultado:

Este truco es perfecto cuando solo hay un elemento hijo único, de lo contrario, la posición absolute afectará al otro elemento dentro del mismo contenedor.

2. Usa la Transformación CSS3

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

Suponiendo que tenemos la misma estructura HTML que el método anterior - un elemento principal, uno secundario - 50% desde arriba y usando transformación CSS da una traducción de -50% . Y ahí lo tienes.

Tenga en cuenta que CSS3 Transforms no funcionará en Internet Explorer 8 y versiones posteriores. Es posible que desee utilizar cualquiera de los otros métodos aquí como alternativa.

3. Use relleno

También podemos usar padding para crear una ilusión de alineación vertical. Para hacerlo, simplemente configure el relleno superior e inferior por igual, de la siguiente manera:

Este truco es adecuado para cuando no configuras el contenedor en un ancho fijo, simplemente establece el ancho en auto .

4. Use altura de línea

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

Recuerde que este truco solo funciona con una sola línea de texto. Si el contenido se divide en dos o más líneas, el espacio entre cada línea sería como lo especificamos en la line-height la line-height, dándonos demasiados espacios en blanco.

5. Use la tabla CSS

Personalmente, usar CSS Table es mi truco favorito para aplicar la alineación vertical. Funciona en navegadores antiguos como Internet Explorer 8. Este método se lleva a cabo configurando la visualización del elemento contenedor en la table, mientras que el elemento hijo se debe mostrar como table-cell luego usa la propiedad vertical-align para centrar el texto verticalmente.

6. Usa 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 directo para alinear el contenido. Para centrar el contenido verticalmente en el cuadro flexible, simplemente agregue elementos align-items: center; de la siguiente manera, y eso es todo.

Tenga en cuenta que algunos navegadores Flexbox solo admiten funciones de parciales del módulo Flexbox, como Internet Explorer 10, Safari, 6 y Chrome 27 y versiones posteriores. Por lo tanto, similar al truco con CSS3 Transform, asegúrese de que el efecto esté bien en este navegador.