Las 5 formas más comunes de centrar contenido con CSS

He creado este artículo en respuesta de una de las dudas más frecuentes que aparecen en foros de maquetación de páginas web. Incluso hay varios memes circulando por Internet sobre la dificultad de centrar contenido con CSS.

Es cierto que hace unos años centrar contenido era una pesadilla, sobre todo si se trataba de centrar elementos verticalmente, pero hoy en día CSS cuenta con unas herramientas muy potentes que han hecho que la dificultad de centrar contenido sea más un tópico que una realidad.

Algunos de los memes sobre centrado de CSS que circulan por Internet

En este artículo vamos a conocer las 5 formas más comunes de centrado de elementos que encontraremos a la hora de maquetar o estructurar un diseño Web.

Forma 1 – Centrado horizontal del contenido de un elementos en bloque

Esta es la forma más sencilla de centrar contenido y que probablemente ya conozcas. Consiste en centrar texto incluido en un elemento en bloque. Los elementos en bloque por defecto ocupan el 100% de espacio donde están, es decir, si un elemento en bloque tiene como elemento padre el body será de forma predeterminada tan ancho como él. Esta característica permite que podamos centrar su contenido con el uso de lqa propiedad text-align: center; de css.

Algunas de las etiquetas en bloque són:

<div>
<p>
<h1> <h2> <h3> <h4> <h5> <h6>
<ol> <ul> <li>
<header> <nav> <aside> <section> <article>...
Ejemplo de cómo centrar la etiqueta <h1> con text-align: center;

Forma 2 – Centrado horizontal del contenido de un elemento en línea

Las etiquetas en línea, al contrario de las etiquetas en bloque, no ocupan el 100% de donde están, ocupan el ancho de de lo que ocupe su contenido por lo que no podemos usar la propiedad text-align: center; sobre la propia etiqueta en línea. Dicho de otra forma, no podemos centrar un texto si la caja que lo contiene ocupa el ancho de ese texto.

Para centrar texto dentro de una etiqueta en línea tenemos que usar la propiedad text-align: center; sobre un elemento padre que sea un bloque.

Algunas etiquetas en línea:

<a> <img> <span> <small>...
text-align: center; sobre la etiqueta <a> no tendría efecto.

Forma 3 . Centrado de un elemento en bloque don el uso de margin: auto;

Como hemos comentado antes los elementos en bloque tienen por defecto un ancho del 100% adaptándose a su contenedor pero, ¿Qué ocurre cuando el elemento en bloque tiene un ancho inferior al 100% y lo queremos centrar? En este caso podemos centrar el bloque usando la propiedad de css margin: auto; sobre él.

margin: auto; es un shorthand (atajo) de CSS y se refiere exclusivamente al margen izquierdo/derecho. También podemos usar la propiedad de CSS margin para asignar márgenes superiores e inferiores. Tienes más información en el Vídeo 5 – Box model 1 del curso avanzado de CSS3.

Como puedes ver en la imagen el header tiene un ancho de 300px. Para centrarlo usamos margin:auto; sobre el header.

Forma 4 – Centrando horizontal y verticalmente utilizando padding

El uso de la propiedad padding (margen interior) de CSS es un recurso muy utilizado para centrar elementos tanto horizontal como verticalmente sobre todo es muy usado en las cabeceras de las páginas.

El centrado mediante el uso de padding tiene un inconveniente que puede ser importante en algunas ocasiones ya que desconocemos la altura resultante del contenedor padre. Este método sería poco adecuado si por ejemplo queremos centrar texto dentro de un cuadrado o de un círculo. Para solucionar este problema tendríamos que usar otras herramientas como Flexbox que explicamos en la Forma 5 de centrar contenido con CSS.

Como puedes observar en la imagen, la propiedad padding: 50px; aplicada al header genera un margen interior de 50px en todos sus lados que «empuja» el contenido al centro.

Forma 5 – Centrar el contenido con Flexbox

Cuando el elemento que queremos centrar está dentro de un contenedor que tiene una altura específica hemos de utilizar Flexbox para que el centrado tanto horizontal como vertical sea perfecto, Antes de la existencia de Flexbox allá por el año 2009 realizar este tipo de centrados era una auténtica pesadilla y en la mayoría de casos había que hacer cálculos matemáticos para que el centrado no fuera «a ojo».

Para el centrado tanto horizontal como vertical con Flex usaremos 3 propiedades de CSS en el contenedor padre:

.container {
     display: flex;
     justify-content: center;
     align-items: center;
}
El texto «A» queda totalmente centrado en el cuadrado verde de la imagen gracias a Flexbox

Flexbox sirve para mucho más que para centrar elementos, puedes aprender a usar de forma profesional Flexbox en los vídeos 17 – Flex1, 18 – Flex2 y 19 – Flex3 de nuestro curso avanzado de CSS

Posted in:

Comments are closed, but trackbacks and pingbacks are open.