Centrar un elemento vertical y horizontalmente con CSS

Descubre cómo lograr la perfecta alineación de tus elementos en el centro de la página con tan solo unas líneas de código CSS. ¡Haz que tu contenido destaque con este sencillo truco de diseño web!

Cómo centrar una imagen horizontalmente en CSS

Para centrar una imagen horizontalmente en CSS, puedes utilizar diferentes métodos. A continuación, se detallan algunas opciones:

**Utilizar la propiedad text-align:** Puedes centrar una imagen dentro de un contenedor utilizando la propiedad CSS **text-align** con el valor **center**. Esto alinea el contenido del contenedor, incluyendo la imagen, en el centro del elemento padre.
**Utilizar márgenes automáticos:** Otra forma común de centrar una imagen horizontalmente es aplicando márgenes automáticos en los lados izquierdo y derecho del elemento que contiene la imagen. Esto se logra con la regla CSS **margin: 0 auto;**
**Utilizar flexbox:** Si estás trabajando con un diseño más moderno, puedes usar flexbox para centrar elementos de forma más flexible. Para ello, debes definir un contenedor con **display: flex;** y **justify-content: center;** para centrar la imagen horizontalmente dentro del contenedor.

Además de estas opciones, también se pueden utilizar otras técnicas como **grid** o **posicionamiento absoluto** según las necesidades del diseño.

Ejemplo de código utilizando márgenes automáticos:

.img-container { margin: 0 auto; width: 50%; }

En este ejemplo, la imagen se centraría horizontalmente dentro de un contenedor con la clase «img-container» y ocuparía el 50% del ancho del contenedor.

Recuerda que la elección del método adecuado dependerá del contexto y del diseño que estés implementando.

Cómo centrar un div en el eje vertical con CSS

Para centrar un div en el eje vertical con CSS, puedes seguir diferentes métodos, algunas de las técnicas más comunes son las siguientes:

Utilizar display: flex en el contenedor del div que deseas centrar. Luego, agregar align-items: center para alinear en el eje vertical.
Otro enfoque es utilizar position: relative en el contenedor y position: absolute en el div interior que queremos centrar, junto con las propiedades top: 50% y transform: translateY(-50%).
Una forma más antigua pero aún efectiva es usar table-cell y las propiedades vertical-align: middle en el contenedor y display: table-cell, vertical-align: middle en el div.

Es importante mencionar que el método más recomendado actualmente es mediante flexbox, ya que ofrece mayor control y flexibilidad en el diseño. A continuación, un ejemplo de código utilizando flexbox:


    Mi contenido centrado verticalmente

Con estas técnicas, puedes centrar fácilmente un div en el eje vertical de manera efectiva y adaptable a diferentes tamaños de pantalla.

Cómo centrar un elemento horizontalmente con CSS

Para centrar un elemento horizontalmente con CSS, se pueden utilizar varias técnicas. A continuación, se mencionan algunas de las más comunes:

**Utilizar** margin: 0 auto;: Esta es una de las formas más comunes y sencillas de centrar un elemento horizontalmente. Se aplica un margen automático a los lados izquierdo y derecho del elemento, lo que lo hace centrarse en relación con su contenedor.
**Utilizar** text-align: center;: En el caso de elementos en línea como texto, se puede centrar su contenido utilizando la propiedad text-align con el valor center en el contenedor padre del elemento. Esto afectará el contenido dentro del contenedor, pero no el contenedor en sí mismo.
**Utilizar** display: flex; y justify-content: center;: Al aplicar flexbox al contenedor padre y establecer justify-content a center, se logra centrar horizontalmente los elementos hijos dentro del contenedor.

Ver más Crea una tabla HTML con código

Para centrar un elemento vertical y horizontalmente con CSS, puedes utilizar la propiedad `display: flex` en el contenedor y sus correspondientes propiedades de alineación. Con esto, lograrás que el elemento se posicione en el centro tanto vertical como horizontalmente de manera sencilla y elegante.