Centrado vertical de un contenido web con css

Centrado vertical de un contenido web con css

Print Friendly, PDF & Email
Valora esta entrada

En anteriores ocasiones se ha tratado el centrado horizontal de contenidos en una página web.

Sin embargo a menudo cuesta encontrar bibliografía sobre el centrado vertical de contenidos.

En este escrito no esperes la solución definitiva pero si una excusa para practicar con 3 estrategias distintas.

Los conceptos mínimos que deberías tener para aprovechar esta publicación son:

Por el momento no tengo pensado tratar el tema de flex aunque tal vez lo haga en un futuro.

¡Entremos en materia!

texto centrado verticalmente con diversas estrategias css
resultado final perseguido

Enunciado

Dados 3 contenedores con un párrafo en su interior se desea centrar verticalmente su contenido.

Se plantea jugar con 3 estrategias diferenciadas para conseguirlo.

  • La primera mediante el uso de la propiedad padding
  • La segunda mediante el uso position:absolute combinado con margin-top negativo.
  • La tercera mediante el uso de la propiedad display:table.

El código html del que se dispone es el siguiente.

<!DOCTYPE html>
<html>
<head>
	<title>centrado vertical de textos</title>
	<style>
	*{box-sizing:border-box;margin:0;padding:0;}
	[class*="estrategia-"]{
		border:1px solid #000;
		margin:32px;
		width:300px;
	}

	.estrategia-1 p{/*uso de padding*/}

	.estrategia-2{/*uso de posicionamientos*/
	.estrategia-2 p{}
	
	.estrategia-3{/*uso de tablas css*/}
	.estrategia-3 p{}

	</style>
</head>
<body>

	<div class="estrategia-1">
		<p>texto centrado con padding</p>
	</div>
	<div class="estrategia-2">
		<p>texto centrado con posicionamientos</p>
	</div>
	<div class="estrategia-3">
		<p>texto centrado con display:table</p>
	</div>

</body>
</html>

Solución del ejercicio

A continuación se explica el centrado vertical para una línea.

Se tomará consideración que la altura de una línea de texto son 18px (16px de fuente más 1px superior y 1px inferior cada línea).

Explicación estrategia uso de la propiedad padding

[class*="estrategia-"]{
		border:1px solid #000;
		margin:32px;
		width:300px;
	}
	.estrategia-1 p{
		padding:32px 0;
	}

El centrado mediante padding superior e inferior es para mi el más limpio de todos.

Se basa en no especificar una altura de párrafo y conseguir así el mismo relleno en el lado superior y el inferior.

El efecto es un centrado vertical perfecto.

Tiene el inconveniente que en función de la altura real del párrafo (por ejemplo 2 o más líneas) la altura del contenedor puede variar.

Explicación estrategia uso de la propiedad position combinado con margin negativo

.estrategia-2{
		position:relative;
		height:82px;
	}
	.estrategia-2 p{
		position:absolute;
		top:50%;
		height:18px;
		margin-top:-9px;
	}

Damos un contenedor un posicionamiento relativo para servir de referencia.

Al párrafo le indicamos un posicionamiento absoluto con referencia el contenedor y una altura. A continuación le damos un margin-top negativa para desplazarlo superiormente justo la distancia para centrarlo.

Tiene como inconveniente que tenemos que dar una altura al párrafo. Si por ejemplo el párrafo necesitara 2 o más líneas entonces no quedaría bien centrado o no cabría el espacio en contenido indicado.

Desde mi punto de vista esta es la peor alternativa de todas.

Explicación estrategia uso de la propiedad display:table;

.estrategia-3{
		display:table;
	}

	.estrategia-3 p{
		height:82px;
		display:table-cell;
		vertical-align:middle;
	}

La estrategia mediante display:table; es una buena alternativa. Se basa en la posibilidad de poder centrar verticalmente el contenido dentro de una celda.

Sólo tenemos que dar a la celda altura suficiente para que quepa todo el contenido que pongamos que este siempre estará bien centrado.

Si tenemos necesidad de tener una altura de contenedor determinada esta es para mi la mejor solución de las 3.

¡Hola!

Querido lector,

Deseo que esta publicación te haya ayudado a esclarecer 3 conceptos de css muy diversos. ¿Con cuál te quedas?

Si te ha gustado este contenido te animo ahora a investigar sobre Flex.

¡Te espero en mi perfil de empresa de Linkedin!

Francesc Ricart
hola@francescricart.com

Soy un ingeniero industrial a quién le apasiona aprender y enseñar. En el mundo del marketing online he encontrado una de mis pasiones. Ejerzo como docente ocupacional y privado para empresas. Y también hago consultoría web para PIMES, autónomos y otros emprendedores como yo. Ayudo a las empresas en cualquier temática relacionada con su presencia digital y herramientas web. Aunque mi especialidad es el posicionamiento en buscadores (SEO). A nivel de formación lo que más feliz me hace es que un alumno haga de mi pasión una forma de vida y le ayude a encontrar trabajo. A nivel de negocios ayudo a empresarios a desenvolverse con soltura en el mundo digital y les animo a hacer cada vez más cosas que nunca hubieran imaginado que ellos también podían hacer. En este camino les ayudo haciendo todo aquello dónde ellos no llegan y crecemos juntos. Encontraréis más acerca de mi en la página sobre mi

No hay comentarios

Escribir un comentario

  Acepto la política de privacidad

Responsable: FRANCESC RICART MUÑOZ.

Finalidad: Gestionar los comentarios que realizas en este blog.

Destinatarios: No se cederán datos a terceros, salvo obligación legal.

Derechos: Tienes derecho a acceder, rectificar y suprimir los datos, así como otros derechos, como se explica en la política de privacidad.