Ejemplo para centrar un elemento en CSS

Centrar un elemento es una de las primeras cosas que los desarrolladores novatos desean aprender en CSS, y por una buena razón: centrar un elemento le da simetría y orden a la página. En este artículo, exploraremos cómo centrar un elemento en CSS, tanto en el eje horizontal como en el vertical, y para diferentes tipos de elementos, como un texto, una imagen o un div.

---

1. Centrado Horizontal de Texto

Para centrar texto dentro de un contenedor, puedes usar la propiedad text-align en el elemento contenedor.

css
.contenedor {
  text-align: center;
}

html
<div class="contenedor">
  <p>Este texto está centrado horizontalmente.</p>
</div>

En este ejemplo, aplicamos text-align: center; al contenedor que rodea el texto, lo que alinea el texto horizontalmente en el centro.

---

2. Centrado de un Elemento de Bloque (Div) Horizontalmente

Para centrar un elemento de bloque como un <div>, puedes usar la propiedad margin: auto; en combinación con un ancho específico.

css
.centrado {
  width: 50%;
  margin: 0 auto;
  background-color: #f3f3f3;
}

html
<div class="centrado">
  Este div está centrado horizontalmente.
</div>

Aquí, el width: 50% establece el ancho del div, y margin: 0 auto; aplica un margen automático a la izquierda y a la derecha, centrando el div en el contenedor.

---

3. Centrado Completo (Horizontal y Vertical) con Flexbox

El modelo de Flexbox es uno de los métodos más poderosos y fáciles para centrar elementos en CSS. A continuación, te muestro cómo centrar un div tanto horizontal como verticalmente.

css
.contenedor-flex {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-color: #e0e0e0;
}
.caja {
  width: 200px;
  height: 100px;
  background-color: #4CAF50;
}

html
<div class="contenedor-flex">
  <div class="caja">
    Elemento centrado
  </div>
</div>

En este caso:

• display: flex; convierte al contenedor en un contenedor Flexbox.
• justify-content: center; alinea los elementos flexibles (en este caso, .caja) horizontalmente.
• align-items: center; alinea los elementos verticalmente.
• height: 100vh; establece la altura del contenedor al 100% del viewport, para lograr el centrado completo en la pantalla.

---

4. Centrado Completo con CSS Grid

CSS Grid es otra herramienta versátil para centrar elementos. Aquí se muestra cómo centrar un div en un contenedor usando Grid:

css
.contenedor-grid {
  display: grid;
  place-items: center;
  height: 100vh;
  background-color: #f8f8f8;
}
.caja {
  width: 150px;
  height: 80px;
  background-color: #3f51b5;
}

html
<div class="contenedor-grid">
  <div class="caja">
    Elemento centrado
  </div>
</div>

Con display: grid; y place-items: center;, el div .caja se centrará automáticamente tanto horizontal como verticalmente dentro de .contenedor-grid.