Centrar un div parece una tontería hasta que te toca hacerlo y no queda como esperabas. Durante años se han usado muchos métodos para centrar elementos en una página web, como por ejemplo tablas, pero hoy en día una de las formas más limpias y sencillas es utilizar Flexbox.
Flexbox permite alinear elementos de forma muy cómoda, tanto horizontal como verticalmente, sin recurrir a trucos raros ni estructuras complicadas.
Qué es Flexbox
Flexbox es un sistema de CSS pensado para distribuir y alinear elementos dentro de un contenedor.
En lugar de colocar cada bloque manualmente, convertimos el contenedor en flexible y le indicamos cómo debe organizar sus elementos interiores.
Esto resulta muy útil para crear diseños responsive, alinear botones, centrar cajas, organizar tarjetas o construir secciones modernas de una página web.
Cómo centrar un div con Flexbox
La forma más sencilla de centrar un div horizontal y verticalmente es usar estas tres propiedades:
.contenedor {
display: flex;
justify-content: center;
align-items: center;
}
display: flex; activa Flexbox en el contenedor.
justify-content: center; centra el contenido horizontalmente.
align-items: center; centra el contenido verticalmente.
Con esto, el elemento interior quedará centrado dentro del contenedor.
Ejemplo completo para copiar y pegar
Simplemente debes crear un archivo nuevo presionando el botón derecho del ratón en cualquier parte vacía del escritorio. Selecciona «Nuevo > Documento de texto». Ponle un nombre tal como «prueba.html» borrando la extensión «.txt» y diciendo que si al aviso. Luego, presiona con el botón secundario del ratón sobre el nuevo archivo creado y selecciona «editar con el bloc de notas». Luego pegas este código, lo guardas y le haces doble clic al archivo. Se abrirá en tu navegador como una página web.
Este ejemplo crea una caja centrada horizontal y verticalmente en toda la pantalla.
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Centrar un div con Flexbox</title>
<style>
.contenedor {
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
}
.caja {
padding: 30px;
background: #f2f2f2;
border-radius: 12px;
}
</style>
</head>
<body>
<div class="contenedor">
<div class="caja">
Texto centrado
</div>
</div>
</body>
</html>
La propiedad min-height: 100vh; hace que el contenedor ocupe toda la altura visible de la pantalla. Lo cual es genial.
Por eso este ejemplo es perfecto para centrar un mensaje, una imagen, un logotipo o una sección sencilla.
Ejemplo práctico: página en construcción
Uno de los usos más habituales de este tipo de centrado es crear una página sencilla de “web en construcción”.
Por ejemplo, una pantalla con el logotipo, un pequeño mensaje y todo centrado en la página. Puedes ver los resultados tal como hemos hecho con el anterior ejemplo.
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Web en construcción</title>
<style>
body {
margin: 0;
font-family: Arial, sans-serif;
}
.under-construction {
min-height: 100vh;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
padding: 30px;
}
.under-construction img {
max-width: 180px;
margin-bottom: 25px;
}
.under-construction h1 {
font-size: 32px;
margin-bottom: 10px;
}
.under-construction p {
font-size: 18px;
color: #666;
}
</style>
</head>
<body>
<div class="under-construction">
<img src="logo.png" alt="Logo">
<h1>Estamos preparando nuestra nueva web</h1>
<p>Muy pronto volveremos con novedades.</p>
</div>
</body>
</html>
Aquí añadimos flex-direction: column; para que los elementos se coloquen uno debajo de otro en lugar de en una fila.
También usamos text-align: center; para centrar el texto dentro de cada bloque.
Recuerda poner una ruta válida a la imagen del logo de tu web. En el ejemplo hemos puesto tan solo «logo.png».
Centrar solo horizontalmente
Si solo quieres centrar un elemento de izquierda a derecha, puedes usar únicamente justify-content.
.contenedor {
display: flex;
justify-content: center;
}
Esto resulta útil para botones, menús, tarjetas o pequeños bloques dentro de una sección.
Centrar solo verticalmente
Si lo que necesitas es centrar verticalmente un elemento dentro de un contenedor, puedes utilizar align-items.
.contenedor {
height: 300px;
display: flex;
align-items: center;
}
En este caso es importante que el contenedor tenga una altura definida. Si no hay altura, no habrá espacio real donde centrar verticalmente.
¿Es mejor Flexbox que otros métodos?
Para la mayoría de casos actuales, sí.
Antes se utilizaban márgenes automáticos, posiciones absolutas o incluso etiquetas antiguas como <center>, pero hoy lo más recomendable es usar CSS moderno.
La etiqueta <center> está obsoleta y no debería utilizarse en proyectos actuales.
Flexbox es más limpio, flexible y fácil de mantener.
Errores habituales al centrar un div
Uno de los errores más comunes es aplicar Flexbox al elemento equivocado.
Recuerda que display: flex; debe aplicarse al contenedor padre, no necesariamente al elemento que quieres centrar.
Otro error habitual es intentar centrar verticalmente un elemento dentro de un contenedor que no tiene altura definida. Si quieres centrar algo en toda la pantalla, lo más sencillo suele ser usar min-height: 100vh;.
Conclusión
Flexbox es una de las formas más sencillas y efectivas de centrar elementos en HTML y CSS. Con unas pocas líneas puedes centrar un div horizontalmente, verticalmente o en ambas direcciones. Además, es perfecto para crear secciones modernas, páginas en construcción, bloques centrados, tarjetas o llamadas a la acción.
En iberotecno utilizamos HTML, CSS, y CMS como WordPress para crear páginas web profesionales, bien estructuradas y adaptadas a todo tipo de dispositivos. Si necesitas una página web profesional para tu negocio, puedes contactar con nosotros.
Comparte este post en redes sociales
Tabla de contenidos
- Asesoramiento gratuito. Somos honrados y transparentes. Te lo explicamos todo al detalle.
- Profesionales con más de 22 años de experiencia.
- Somos rápidos y eficientes. Trabajamos a tu lado.
- Precios asequibles. Nos adaptamos a tu presupuesto.
- Formación incluida. Te enseñamos a gestionar tu web por ti mismo. Sin depender de nadie.
- Garantía 100%. Entregamos copia de seguridad. Tu web será tuya para siempre.
