Cómo centrar un DIV en CSS: 7 formas y cuándo usar cada una

Si alguna vez has trabajado con HTML y CSS, probablemente te has encontrado con uno de esos problemas que parecen demasiado fáciles… hasta que intentas resolverlos.

¿Cómo centro un DIV?

Puedes encontrar decenas de respuestas diferentes: margin: auto, Flexbox, Grid, position: absolute, transform…

Entonces aparece la siguiente pregunta:

¿Cuál debería usar?

En este artículo vamos a ver 7 formas de centrar elementos con CSS, desde las técnicas más sencillas hasta las más específicas, y lo más importante: cuándo conviene utilizar cada una.

Antes de empezar: ¿qué significa «centrar» un DIV?

Cuando alguien dice que quiere centrar un DIV, puede estar hablando de diferentes cosas.

Por ejemplo:

• Centrarlo horizontalmente.
• Centrarlo verticalmente.
• Centrarlo horizontal y verticalmente.
• Centrar el contenido dentro del DIV.
• Centrarlo dentro de un contenedor específico.
• Centrar un elemento que tiene un tamaño dinámico.

Por eso no existe una única técnica que sea siempre la mejor.

Para los ejemplos utilizaremos esta estructura:

<div class="contenedor">
    <div class="caja">
        Contenido
    </div>
</div>

1. Centrar un DIV horizontalmente con margin: auto

Si solamente necesitas centrar un elemento horizontalmente, una de las formas más sencillas es:

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

El navegador calcula automáticamente los márgenes izquierdo y derecho disponibles y los distribuye de forma equivalente.

Ejemplo completo

.contenedor {
    width: 100%;
}

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

Esto funciona especialmente bien cuando tienes un elemento de bloque con un ancho definido.

¿Cuándo usarlo?

Utiliza margin: 0 auto cuando:

• Solo necesitas centrado horizontal.
• El elemento tiene un ancho definido o un ancho que permita calcular los márgenes.
• No necesitas controlar el centrado vertical.

Por ejemplo, es una técnica clásica para centrar un contenedor principal de una página:

.container {
    max-width: 1200px;
    margin: 0 auto;
}

Este patrón sigue siendo extremadamente útil en desarrollo web.

2. Centrar un DIV horizontal y verticalmente con Flexbox

Si quieres centrar un elemento tanto horizontal como verticalmente, Flexbox probablemente sea la primera opción que deberías considerar.

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

Pero hay un detalle importante.

Para que puedas ver el centrado vertical, el contenedor necesita tener una altura suficiente.

Por ejemplo:

.contenedor {
    min-height: 100vh;

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

Ahora la caja estará centrada en ambos ejes.

¿Qué hace cada propiedad?

display: flex;

Convierte el contenedor en un flex container.

justify-content: center;

Centra los elementos en el eje principal.

align-items: center;

Los centra en el eje cruzado.

Con la dirección predeterminada de Flexbox, esto normalmente significa:

• justify-content → horizontal
• align-items → vertical

¿Cuándo usar Flexbox?

Es una excelente opción cuando estás trabajando con:

• Botones.
• Tarjetas.
• Formularios.
• Elementos de navegación.
• Filas de elementos.
• Componentes de interfaces.
• Contenido que necesita alineación flexible.

3. Centrar un DIV con CSS Grid

CSS Grid también permite centrar un elemento de una forma extremadamente sencilla.

.contenedor {
    display: grid;
    place-items: center;
}

Eso es todo.

Si queremos centrar una caja dentro de toda la pantalla:

.contenedor {
    min-height: 100vh;

    display: grid;
    place-items: center;
}

¿Qué hace place-items?

place-items es una propiedad abreviada que permite controlar la alineación de los elementos dentro de un grid.

Por eso:

place-items: center;

es una solución muy cómoda cuando simplemente quieres colocar un elemento en el centro.

¿Grid o Flexbox?

Una regla práctica:

Usa Flexbox cuando estás organizando elementos principalmente en una dimensión.

Usa Grid cuando estás trabajando con filas y columnas o un layout bidimensional.

Pero si solamente necesitas centrar un único elemento, ambas opciones funcionan perfectamente.

4. Centrar con position: absolute y transform

Antes de que Flexbox y Grid fueran las soluciones habituales, era muy común utilizar posicionamiento absoluto.

La técnica sigue siendo útil en determinados casos.

.contenedor {
    position: relative;
}

.caja {
    position: absolute;

    top: 50%;
    left: 50%;

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

Primero movemos la esquina superior izquierda del elemento hasta el centro:

top: 50%;
left: 50%;

Pero ahora el elemento estaría desplazado hacia abajo y hacia la derecha.

Por eso utilizamos:

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

Esto mueve el elemento hacia atrás la mitad de su propio ancho y altura.

¿Cuándo utilizar esta técnica?

Es especialmente útil cuando el elemento necesita estar superpuesto sobre otro elemento.

Por ejemplo:

• Modales.
• Badges.
• Iconos sobre imágenes.
• Elementos flotantes.
• Overlays.

Para un layout normal, Flexbox o Grid suelen ser opciones más sencillas.

5. Centrar un elemento absoluto usando inset y margin: auto

Existe otra técnica muy útil cuando trabajas con position: absolute.

.contenedor {
    position: relative;
}

.caja {
    position: absolute;

    inset: 0;
    margin: auto;
}

Aquí inset: 0 establece:

top: 0;
right: 0;
bottom: 0;
left: 0;

Después, margin: auto permite que el navegador distribuya el espacio disponible.

Si la caja tiene un tamaño definido:

.caja {
    position: absolute;

    width: 300px;
    height: 200px;

    inset: 0;
    margin: auto;
}

puedes centrarla dentro del contenedor.

Esta técnica es particularmente interesante para elementos posicionados de forma absoluta.

6. Centrar solamente el texto

Si lo que quieres centrar no es el DIV sino el texto que está dentro de él, puedes utilizar:

.contenedor {
    text-align: center;
}

Por ejemplo:

<div class="contenedor">
    <h1>Hola mundo</h1>
    <p>Este texto está centrado.</p>
</div>

.contenedor {
    text-align: center;
}

Ten en cuenta que:

text-align: center;

centra el contenido de texto y elementos inline, pero no es la solución general para centrar un DIV como elemento de bloque.

7. Centrar un elemento horizontal y verticalmente con una sola línea

Si estás utilizando CSS Grid, existe una solución especialmente sencilla:

.contenedor {
    display: grid;
    place-items: center;
}

Sí, técnicamente ya la vimos anteriormente.

Pero vale la pena recordarla porque es una de esas pequeñas líneas de CSS que conviene tener en tu «caja de herramientas».

Por ejemplo:

<div class="contenedor">
    <div class="caja">
        ¡Estoy centrado!
    </div>
</div>

.contenedor {
    min-height: 100vh;
    display: grid;
    place-items: center;
}

¿Cuál es la mejor forma de centrar un DIV?

No existe una única respuesta.

Depende de lo que estés intentando construir.

Si estás empezando con CSS, mi recomendación sería aprender primero estas tres:

margin: 0 auto;

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

display: grid;
place-items: center;

Con ellas podrás resolver una enorme cantidad de problemas de alineación.

¿Por qué margin: auto no funciona para centrar verticalmente?

Este es uno de los errores más comunes.

Puedes tener algo como:

.caja {
    margin: auto;
}

y descubrir que el elemento no aparece centrado verticalmente.

¿Por qué?

Porque margin: auto no convierte automáticamente cualquier contenedor en un sistema de centrado vertical.

Para centrar un elemento verticalmente necesitas que el contexto de layout permita distribuir ese espacio.

Por ejemplo, Flexbox:

.contenedor {
    min-height: 100vh;

    display: flex;
    align-items: center;
}

O Grid:

.contenedor {
    min-height: 100vh;

    display: grid;
    place-items: center;
}

¿Por qué align-items: center no funciona?

Otro error muy común es escribir:

.contenedor {
    align-items: center;
}

y esperar que el elemento se centre.

Pero falta algo:

display: flex;

o:

display: grid;

Por ejemplo:

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

Ahora align-items tiene un contexto de Flexbox en el que puede funcionar.

¿Flexbox o Grid para centrar un DIV?

Si solo estás intentando centrar un elemento, cualquiera de los dos puede funcionar.

Flexbox

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

Grid

.contenedor {
    display: grid;
    place-items: center;
}

Personalmente, si solamente necesito centrar un elemento, probablemente utilizaría:

display: grid;
place-items: center;

Si además necesito organizar varios elementos horizontal o verticalmente, normalmente utilizaría Flexbox.

La elección debería depender del layout que estás construyendo, no de cuál método tiene menos líneas de código.

¿Qué método deberías aprender primero?

Si eres principiante, no intentes memorizar las siete técnicas.

Empieza por estas:

1. Centrado horizontal

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

2. Flexbox

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

3. Grid

.contenedor {
    display: grid;
    place-items: center;
}

Después aprende position: absolute cuando empieces a trabajar con elementos superpuestos.

Conclusión

Centrar un DIV en CSS parece una tarea sencilla, pero entender por qué funcionan las diferentes técnicas es mucho más importante que memorizar un único código.

Si necesitas un centrado horizontal sencillo, prueba:

margin: 0 auto;

Si necesitas organizar elementos de forma flexible:

display: flex;

Si necesitas centrar rápidamente un elemento:

display: grid;
place-items: center;

Y si estás trabajando con elementos superpuestos:

position: absolute;

La próxima vez que tengas problemas para centrar algo, no busques simplemente «el código para centrar un DIV».

Primero pregúntate:

¿Qué estoy intentando centrar y dentro de qué contexto?

Una vez entiendes eso, elegir la solución correcta se vuelve mucho más sencillo.

Preguntas frecuentes

.contenedor {
    display: grid;
    place-items: center;
}

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

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

.contenedor {
    display: grid;
    place-items: center;
}

 margin: auto