Se lee en 4 minutos

Vamos a aprender a centrar horizontal y verticalmente con CSS distintos tipos de contenidos en una página HTML.

Centrando texto:

La clave está en hacer que el elemento que englobará a todos los demás (html, body) se comporte como una tabla. Para conseguirlo utilizamos la propiedad display: table;

El resto de propiedades que aplicamos tanto a html como a body sirven para quitar márgenes y espaciados. Poniendo el ancho y el alto al 100% disponemos de todo el espacio del navegador para poder centrar su contenido.

Tenemos que crear un par de divs para poder centrar horizontal y verticalmente el contenido. Creamos un div que en nuestro ejemplo lleva asignada la clase .contenedor. Este div se comporta como una celda de una tabla si le ponemos display: table-cell; . De esta manera podemos conseguir que el div que tiene dentro (contenido) esté centrado horizontal (text-align: center;) y verticalmente (vertical-align: middle;)

Finalmente creamos el div al que hemos asignado la clase .contenido. Tiene que estar dentro del div con clase .contenedor.

Al div .contenido le asignamos por css un display: inline-block;. En este caso concreto también le damos un ancho fijo para evitar que las líneas sean demasiado largas y no perder legibilidad. También para este ejemplo hemos alineado el texto a la izquierda.

Aquí tienes el ejemplo completo de texto centrado horizontal y verticalmente

* Si quisiéramos que el texto del ejemplo tuviese una alineación centrada (por ejemplo para dar el aspecto de una letra de una canción o una poesía), es tan simple como añadir cambiar en la clase .contenido la propiedad text-align: left; por text-align: center;

Centrando una imagen:

En realidad cambian muy pocas cosas respecto al ejemplo anterior (eso es lo bueno de utilizar este método que te propongo).

Dentro del <body> tendremos ahora una imagen (<img>)  que para el ejemplo será de 450px de ancho.

Lo que cambia respecto al anterior ejemplo es que la clase .contenido sólo necesita la propiedad display: inline-block; para hacer su trabajo.

Aunque con esto ya tenemos la imagen centrada horizontal y verticalmente, he añadido una pequeña mejora. Para que la imagen se ajuste a tamaños pequeños (smartphones antiguos o de poca resolución), he añadido a la etiqueta <img> un ancho del 100%. De esta manera la imagen se ajustará al tamaño del div que la contiene.

Aquí tienes el ejemplo completo de imagen centrada horizontal y verticalmente 

Centrando una imagen que se ajuste al ancho del navegador:

Para conseguir que una imagen, además de estar centrada horizontal y verticalmente, se adapte al ancho del navegador sólo tienes que añadir a la clase .contenido lo siguiente: width; 100%;

Aquí tienes el ejemplo completo de imagen centrada que se adapta al ancho del navegador

Centrando players de audio (soundcloud) y vídeo (YouTube):

Es tan fácil como buscar el botón “Insertar” o similar en cualquiera de estos servicios. Nos generará un código que copiaremos y pegaremos en el <body> de nuestra página. Aquí tienes un par de ejemplos:

Ejemplo de audio (soundcloud) centrado horizontal y verticalmente

Ejemplo de vídeo (YouTube) centrado horizontal y verticalmente

 

Y esto es todo. Hay otras formas de centrar contenido, pero esta es sencilla y puede serte útil en muchos casos.

 

* La imagen usada en los ejemplos pertenece a freepik.

 

Suscríbete a tonalidad.es