Cómo centrar un div en CSS: guía fácil con ejemplos

Centrar un div en CSS es una de las dudas más comunes cuando estás empezando en desarrollo web. Aunque parece algo simple, existen varias formas de hacerlo dependiendo del tipo de diseño que quieras crear.

Puedes centrar un div horizontalmente, verticalmente o en el centro exacto de la pantalla. Para lograrlo, CSS ofrece diferentes métodos como Flexbox, Grid, margin auto y position absolute.

En esta guía aprenderás las formas más prácticas de centrar un div en CSS con ejemplos claros y fáciles de aplicar.

Qué significa centrar un div en CSS

Un div es una etiqueta HTML que se usa para agrupar contenido. Puede contener textos, imágenes, botones, tarjetas, formularios o cualquier otro elemento de una página web.

Cuando hablamos de centrar un div, podemos referirnos a tres cosas diferentes:

• Centrarlo horizontalmente.
• Centrarlo verticalmente.
• Centrarlo horizontal y verticalmente al mismo tiempo.

Por eso, antes de aplicar CSS, es importante saber qué tipo de centrado necesitas.

Ejemplo básico de HTML

Para todos los ejemplos usaremos una estructura sencilla:

<div class="contenedor">
  <div class="caja">
    Soy un div centrado
  </div>
</div>

Y esta base de CSS:

.contenedor {
  height: 400px;
  background-color: #f3f4f6;
}

.caja {
  width: 200px;
  height: 100px;
  background-color: #2563eb;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
}

Ahora veremos diferentes formas de centrar la caja.

Cómo centrar un div con Flexbox

Flexbox es una de las formas más fáciles y modernas de centrar elementos en CSS.

Para centrar un div horizontal y verticalmente, solo necesitas aplicar estas propiedades al contenedor:

.contenedor {
  height: 400px;
  background-color: #f3f4f6;

  display: flex;
  justify-content: center;
  align-items: center;
}

Explicación

La propiedad display: flex activa Flexbox en el contenedor.

Luego:

justify-content: center;

centra el elemento horizontalmente.

Y:

align-items: center;

centra el elemento verticalmente.

Este método es ideal para centrar tarjetas, botones, cajas, formularios, menús o bloques dentro de una sección.

Código completo con Flexbox

<div class="contenedor">
  <div class="caja">
    Soy un div centrado
  </div>
</div>

.contenedor {
  height: 400px;
  background-color: #f3f4f6;
  display: flex;
  justify-content: center;
  align-items: center;
}

.caja {
  width: 200px;
  height: 100px;
  background-color: #2563eb;
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
}

Esta es probablemente la opción más recomendable para principiantes.

Cómo centrar un div con CSS Grid

CSS Grid también permite centrar elementos de forma muy sencilla.

.contenedor {
  height: 400px;
  background-color: #f3f4f6;

  display: grid;
  place-items: center;
}

La propiedad:

place-items: center;

centra el elemento tanto horizontal como verticalmente.

Código completo con Grid

<div class="contenedor">
  <div class="caja">
    Soy un div centrado con Grid
  </div>
</div>

.contenedor {
  height: 400px;
  background-color: #f3f4f6;
  display: grid;
  place-items: center;
}

.caja {
  width: 200px;
  height: 100px;
  background-color: #16a34a;
  color: white;
  display: grid;
  place-items: center;
}

Grid es una opción muy limpia cuando solo necesitas centrar un elemento dentro de un contenedor.

Cómo centrar un div horizontalmente con margin auto

Si solo quieres centrar un div de forma horizontal, puedes usar margin: auto.

.caja {
  width: 300px;
  margin: 0 auto;
}

Este método funciona cuando el elemento tiene un ancho definido.

Ejemplo:

<div class="caja">
  Estoy centrado horizontalmente
</div>

.caja {
  width: 300px;
  background-color: #dc2626;
  color: white;
  padding: 20px;
  margin: 0 auto;
  text-align: center;
}

Este método es útil para centrar contenedores principales, tarjetas, bloques de texto o secciones con ancho fijo.

Cómo centrar un div vertical y horizontalmente con position

También puedes centrar un div usando position: absolute, aunque hoy suele ser mejor usar Flexbox o Grid.

.contenedor {
  position: relative;
  height: 400px;
  background-color: #f3f4f6;
}

.caja {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

Explicación

Con top: 50% y left: 50%, el elemento se mueve hacia el centro del contenedor.

Luego usamos:

transform: translate(-50%, -50%);

para corregir su propia posición y dejarlo perfectamente centrado.

Código completo con position absolute

<div class="contenedor">
  <div class="caja">
    Centrado con position
  </div>
</div>

.contenedor {
  position: relative;
  height: 400px;
  background-color: #f3f4f6;
}

.caja {
  width: 220px;
  height: 100px;
  background-color: #7c3aed;
  color: white;

  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  
  display: flex;
  align-items: center;
  justify-content: center;
}

Este método puede ser útil en diseños específicos, como modales, elementos flotantes o capas superpuestas.

Cuál es la mejor forma de centrar un div en CSS

La mejor opción depende del caso.

Si estás empezando, usa Flexbox. Es fácil, moderno y funciona muy bien para la mayoría de diseños.

Si solo necesitas centrar un elemento dentro de un contenedor, CSS Grid con place-items: center es una opción muy rápida.

Si quieres centrar un bloque horizontalmente, puedes usar margin auto.

Y si estás trabajando con elementos flotantes, modales o capas, puedes usar position absolute.

Resumen rápido

Errores comunes al centrar un div

Uno de los errores más comunes es aplicar justify-content o align-items sin colocar primero:

display: flex;

Otro error frecuente es usar margin: auto sin definir un ancho. Para que funcione correctamente, el div debe tener un width.

También puede pasar que intentes centrar verticalmente un elemento, pero el contenedor no tenga altura definida. En ese caso, CSS no tiene una referencia clara para calcular el centro.

Ejemplo incorrecto:

.contenedor {
  display: flex;
  justify-content: center;
  align-items: center;
}

Si el contenedor no tiene altura, el centrado vertical puede no notarse.

Ejemplo corregido:

.contenedor {
  height: 400px;
  display: flex;
  justify-content: center;
  align-items: center;
}

Ejemplo práctico: tarjeta centrada en pantalla

Este ejemplo centra una tarjeta completa en el centro de la pantalla:

<div class="pagina">
  <div class="tarjeta">
    <h2>Aprende CSS</h2>
    <p>Domina Flexbox, Grid y diseño responsive con ejemplos prácticos.</p>
    <a href="#">Empezar ahora</a>
  </div>
</div>

.pagina {
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #f9fafb;
}

.tarjeta {
  width: 320px;
  padding: 30px;
  background-color: white;
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
  text-align: center;
}

.tarjeta h2 {
  margin-bottom: 12px;
  color: #111827;
}

.tarjeta p {
  color: #4b5563;
  line-height: 1.6;
}

.tarjeta a {
  display: inline-block;
  margin-top: 20px;
  padding: 12px 20px;
  background-color: #2563eb;
  color: white;
  text-decoration: none;
  border-radius: 8px;
}

Este tipo de estructura se puede usar para secciones hero, formularios de login, tarjetas de presentación o mensajes destacados.

Preguntas frecuentes sobre centrar un div en CSS

¿Cuál es la forma más fácil de centrar un div?

La forma más fácil es usar Flexbox:

.contenedor {
  display: flex;
  justify-content: center;
  align-items: center;
}

¿Por qué no se centra mi div?

Puede ser porque el contenedor no tiene altura definida, porque no activaste display: flex, o porque intentas usar margin: auto sin definir un ancho.

¿Qué es mejor para centrar, Flexbox o Grid?

Flexbox es mejor cuando trabajas con elementos en fila o columna. Grid es muy cómodo cuando quieres centrar un solo elemento dentro de un contenedor.

¿Puedo centrar un div solo horizontalmente?

Sí. Puedes usar:

.caja {
  width: 300px;
  margin: 0 auto;
}

¿Cómo centro un div en toda la pantalla?

Puedes usar min-height: 100vh con Flexbox:

body {
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

Muy importante

Centrar un div en CSS puede hacerse de varias formas, pero las más recomendables hoy son Flexbox y CSS Grid. Ambas opciones son modernas, fáciles de entender y funcionan muy bien en diseños actuales.

Si estás empezando, aprende primero Flexbox. Después puedes practicar con Grid, margin auto y position absolute para entender cuándo conviene usar cada método.

Dominar estas técnicas te ayudará a crear diseños más limpios, ordenados y profesionales en tus proyectos web.