Centrar un div en CSS es una de las dudas más comunes cuando estás aprendiendo desarrollo web. Aunque parece algo simple, existen varias formas de hacerlo dependiendo de lo que necesites: centrar horizontalmente, centrar verticalmente, centrar dentro de toda la pantalla o centrar contenido dentro de una caja.
En esta guía aprenderás las formas más prácticas y modernas para centrar elementos con CSS, usando métodos como margin: auto, Flexbox y CSS Grid.
Qué significa centrar un div en CSS
Cuando hablamos de centrar un div, normalmente podemos referirnos a tres casos diferentes:
Centrar horizontalmente
Centrar verticalmente
Centrar horizontal y verticalmente al mismo tiempoPor eso, antes de escribir CSS, debes tener claro qué tipo de centrado necesitas.
No es lo mismo centrar una tarjeta en medio de la pantalla que centrar un botón dentro de una caja o centrar una imagen dentro de una sección.
Cómo centrar un div horizontalmente con CSS
La forma clásica de centrar un div horizontalmente es usando margin: auto.
Centrar un div horizontalmente con margin auto
<div class="caja">
Estoy centrado horizontalmente
</div>
<style>
.caja {
width: 300px;
margin: 0 auto;
padding: 30px;
background: #2478ff;
color: white;
border-radius: 16px;
text-align: center;
}
</style>Este método funciona cuando el elemento tiene un ancho definido. Si el div ocupa el 100% del ancho disponible, no notarás el centrado porque ya está ocupando todo el espacio.
Ejemplo completo:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Centrar div horizontalmente</title>
<style>
.caja {
width: 300px;
margin: 0 auto;
padding: 30px;
background: #2478ff;
color: white;
border-radius: 16px;
text-align: center;
font-family: Arial, sans-serif;
}
</style>
</head>
<body>
<div class="caja">
Estoy centrado horizontalmente
</div>
</body>
</html>Cómo centrar un div con Flexbox
Flexbox es una de las formas más fáciles y modernas de centrar elementos en CSS. Sirve especialmente cuando quieres centrar un elemento dentro de un contenedor.
Centrar un div con Flexbox
Div centrado
Este elemento está centrado horizontal y verticalmente con Flexbox.
<div class="contenedor">
<div class="caja">
Estoy centrado con Flexbox
</div>
</div>
<style>
.contenedor {
min-height: 300px;
display: flex;
justify-content: center;
align-items: center;
}
.caja {
width: 320px;
padding: 35px;
background: #2478ff;
color: white;
border-radius: 20px;
text-align: center;
}
</style>La propiedad justify-content: center centra el elemento horizontalmente.
La propiedad align-items: center centra el elemento verticalmente.
Para que el centrado vertical se note, el contenedor debe tener una altura definida:
.contenedor {
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}100vh significa que el contenedor tendrá el alto completo de la pantalla.
Código completo para centrar un div con Flexbox
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Centrar div con Flexbox</title>
<style>
body {
margin: 0;
font-family: Arial, sans-serif;
background: #f4f8ff;
}
.contenedor {
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
.caja {
width: 320px;
padding: 35px;
background: #2478ff;
color: white;
border-radius: 20px;
text-align: center;
box-shadow: 0 14px 30px rgba(36, 120, 255, 0.25);
}
.caja h1 {
margin: 0 0 12px;
font-size: 28px;
}
.caja p {
margin: 0;
line-height: 1.6;
}
</style>
</head>
<body>
<div class="contenedor">
<div class="caja">
<h1>Div centrado</h1>
<p>Este elemento está centrado horizontal y verticalmente con Flexbox.</p>
</div>
</div>
</body>
</html>Cómo centrar un div con CSS Grid
CSS Grid también permite centrar elementos de forma muy simple. De hecho, si solo quieres centrar un elemento dentro de un contenedor, Grid puede ser incluso más corto que Flexbox.
.contenedor {
display: grid;
place-items: center;
min-height: 100vh;
}La propiedad place-items: center centra el elemento tanto horizontal como verticalmente.
Ejemplo:
<div class="contenedor">
<div class="caja">
Estoy centrado con Grid
</div>
</div>.contenedor {
min-height: 100vh;
display: grid;
place-items: center;
}
.caja {
width: 300px;
padding: 30px;
background: #0f172a;
color: white;
border-radius: 18px;
text-align: center;
}Flexbox vs Grid para centrar elementos
Tanto Flexbox como Grid son buenas opciones para centrar elementos en CSS. La diferencia principal está en el tipo de diseño que estás construyendo.
Usa Flexbox cuando quieras organizar elementos en una fila o columna, como botones, tarjetas, menús o bloques alineados.
Usa Grid cuando quieras trabajar con estructuras más completas, columnas, filas o layouts más controlados.
Para centrar un solo div, ambas opciones funcionan muy bien.
/* Flexbox */
.contenedor {
display: flex;
justify-content: center;
align-items: center;
}
/* Grid */
.contenedor {
display: grid;
place-items: center;
}Si estás empezando, puedes aprender primero Flexbox porque lo usarás en muchísimos diseños reales.
Cómo centrar texto dentro de un div
Si lo que quieres es centrar el texto dentro de una caja, puedes usar text-align: center.
Centrar texto dentro de un div
Título centrado
Este texto está centrado dentro del div usando text-align center.
<div class="caja">
<h2>Título centrado</h2>
<p>Texto centrado dentro del div.</p>
</div>
<style>
.caja {
text-align: center;
}
</style>Esto no centra el div como bloque, solo centra el contenido de texto que está dentro.
Cómo centrar una imagen con CSS
Para centrar una imagen, puedes convertirla en bloque y usar margin: auto.
Centrar una imagen con CSS
<img src="imagen.jpg" alt="Imagen de ejemplo" class="imagen">
<style>
.imagen {
display: block;
max-width: 100%;
height: auto;
margin: 0 auto;
}
</style>Esto es útil cuando tienes una imagen dentro de un artículo, una sección o una tarjeta.
Cómo centrar un botón en CSS
Para centrar un botón puedes envolverlo en un contenedor y usar text-align: center.
Centrar un botón con CSS
<div class="boton-contenedor">
<a href="#" class="boton">Ver más</a>
</div>
<style>
.boton-contenedor {
text-align: center;
}
.boton {
display: inline-block;
padding: 14px 24px;
background: #2478ff;
color: white;
border-radius: 12px;
text-decoration: none;
font-weight: bold;
}
</style>También puedes usar Flexbox:
.boton-contenedor {
display: flex;
justify-content: center;
}Errores comunes al centrar un div en CSS
Uno de los errores más comunes es usar margin: auto sin definir un ancho. Si el elemento ocupa todo el ancho disponible, no verás ningún cambio.
Otro error frecuente es intentar centrar verticalmente con align-items: center sin que el contenedor tenga altura. Para centrar verticalmente, el contenedor necesita espacio vertical.
También es común confundir text-align: center con centrar un div. text-align centra el texto o elementos inline, pero no centra necesariamente una caja completa.
Ejemplo incorrecto:
.caja {
text-align: center;
}Esto centra el texto dentro de .caja, pero no centra la caja en la pantalla.
Mejor forma de centrar un div actualmente
Para la mayoría de casos modernos, la forma más práctica es usar Flexbox:
.contenedor {
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}Y si quieres una opción aún más corta para un solo elemento, puedes usar Grid:
.contenedor {
min-height: 100vh;
display: grid;
place-items: center;
}Ambas formas son limpias, modernas y fáciles de entender.
Ejemplo final: tarjeta centrada con CSS
Aquí tienes un ejemplo completo con una tarjeta centrada en la pantalla:
Ejemplo final: tarjeta centrada con CSS
Tarjeta centrada
Este ejemplo usa Flexbox para centrar una tarjeta completa en la pantalla.
Ver ejemplo<div class="contenedor">
<div class="tarjeta">
<span>CSS</span>
<h1>Tarjeta centrada</h1>
<p>Este ejemplo usa Flexbox para centrar una tarjeta completa en la pantalla.</p>
<a href="#">Ver ejemplo</a>
</div>
</div>
<style>
.contenedor {
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
padding: 20px;
}
.tarjeta {
max-width: 380px;
padding: 35px;
background: #ffffff;
border-radius: 24px;
text-align: center;
box-shadow: 0 20px 45px rgba(15, 23, 42, 0.12);
}
.tarjeta span {
width: 60px;
height: 60px;
display: grid;
place-items: center;
margin: 0 auto 20px;
border-radius: 18px;
background: #2478ff;
color: white;
font-size: 28px;
font-weight: bold;
}
.tarjeta a {
display: inline-flex;
padding: 14px 24px;
border-radius: 12px;
background: #2478ff;
color: white;
text-decoration: none;
font-weight: bold;
}
</style>Preguntas frecuentes sobre centrar un div en CSS
¿Cuál es la forma más fácil de centrar un div en CSS?
La forma más fácil actualmente es usar Flexbox:
.contenedor {
display: flex;
justify-content: center;
align-items: center;
}¿Cómo centro un div horizontalmente?
Puedes usar margin: 0 auto, pero el div debe tener un ancho definido.
.caja {
width: 300px;
margin: 0 auto;
}¿Cómo centro un div verticalmente?
Puedes usar Flexbox con align-items: center, siempre que el contenedor tenga una altura definida.
.contenedor {
height: 100vh;
display: flex;
align-items: center;
}¿Cómo centro un div horizontal y verticalmente?
La forma más práctica es esta:
.contenedor {
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}¿Puedo centrar un div con Grid?
Sí. CSS Grid permite centrar un div con muy poco código:
.contenedor {
display: grid;
place-items: center;
}Conclusión
Centrar un div en CSS puede parecer confuso al principio, pero se vuelve muy sencillo cuando entiendes qué tipo de centrado necesitas. Para centrar horizontalmente puedes usar margin: auto. Para centrar horizontal y verticalmente, lo más recomendable es usar Flexbox o CSS Grid.
Si estás aprendiendo CSS desde cero, dominar estas técnicas te ayudará a crear secciones, tarjetas, botones, imágenes y layouts mucho más profesionales.