En el mundo de la programación web, existe una extensa variedad de herramientas, etiquetas, funciones, librerías, etc. que nos permiten realizar funciones similares, por lo cual, se puede obtener un mismo resultado con una docena de maneras diferentes. Todo depende de la creatividad, experiencia y conocimiento del desarrollador.
En este tutorial aprenderemos una forma sencilla para centrar contenido con CSS, de forma horizontal, vertical y ambas, no importa el tamaño del dispositivo, el contenido siempre se mantendrá en el centro.
Para ello utilizaremos un par de propiedades pertenecientes a CSS y que todo desarrollador web, debe conocer, las cuales son:
aling-items: center y justify-content: center.
Estas propiedades funcionan únicamente si se implementa FlexBox en el contenedor, quiero decir, utilizando la propiedad display: flex. antes de utilizar las propiedades de alineación.
La propiedad aling-items: center centra el contenido de manera vertical.
Ejemplo:
</pre> <div> <div><div class="contenedor-principal"></div> <div> <div class="segundo-contenedor"></div> <div> </div></div> <div></div</div> </div> <pre>
</pre>
<div>
<div>.contenedor-principal{</div>
<div> width: 60vw;</div>
<div> height: 60vh;</div>
<div> display: flex;</div>
<div> background-color: cyan;</div>
<div> align-items: center;</div>
<div>}</div>
<div>.segundo-contenedor{</div>
<div> background: chartreuse;</div>
<div> height: 100px;</div>
<div> width: 100px;</div>
<div>}</div>
</div>
<pre>
como se observa, el div verde, se alineó de manera vertical al centro del contenedor principal.
Por otro lado la propiedad justify-content: center centra el contenido de manera horizontal.
Ejemplo:
</pre>
<div>
<div><div class="contenedor-principal"></div>
<div> <div class="segundo-contenedor"></div>
<div> </div></div>
<div></div></div>
</div>
<pre></pre>
<div>
<div>.contenedor-principal{</div>
<div> width: 60vw;</div>
<div> height: 60vh;</div>
<div> display: flex;</div>
<div> justify-content: center;</div>
<div> background-color: cyan;</div>
<div>}</div>
<div>.segundo-contenedor{</div>
<div> background: chartreuse;</div>
<div> height: 100px;</div>
<div> width: 100px;</div>
<div>}</div>
</div>
<pre>
por último si se utilizan las ambas propiedades aling-items: center y justify-content: center el contenido se centrará tanto horizontalmente como verticalmente.
Estas propiedades se pueden para alinear tanto <div> como imágenes y textos.