Cómo Centrar un Div con Tailwind CSS
Etiquetas:
Centrar contenido visualmente es una de las tareas más comunes al diseñar una interfaz. Con Tailwind CSS v4, puedes lograrlo sin escribir CSS personalizado, aprovechando clases utilitarias potentes y flexibles.
En esta guía aprenderás:
-
Qué significa centrar un elemento horizontal, vertical o completamente.
-
Qué clases usar según el tipo de centrado.
-
Casos prácticos reales.
-
Un ejemplo completo listo para copiar y usar.
📘 ¿Qué significa “centrar” en diseño web?
Centrar un elemento puede significar tres cosas:
-
Centrado horizontal: El elemento está alineado al medio respecto al ancho de su contenedor.
-
Centrado vertical: El elemento está alineado al centro respecto a la altura del contenedor.
-
Centrado completo (ambos ejes): El elemento está exactamente en el centro, tanto horizontal como verticalmente.
Tailwind te ofrece distintas herramientas para lograr cada uno de estos tipos de centrado.
✅ 1. Centrado Horizontal con mx-auto
🔍 ¿Cómo funciona?
La clase mx-auto aplica margin-left: auto y margin-right: auto. Para que funcione, el elemento debe tener un ancho definido, como w-1/2, w-80, o w-max.
🧪 Caso práctico 1: Tarjeta de presentación
<div class="mx-auto w-80 bg-white p-6 shadow rounded">
<h2 class="text-xl font-bold">Juan Pérez</h2>
<p>Desarrollador Web</p>
</div>
🔹 Se usa mx-auto para centrar horizontalmente, con ancho fijo.
🧪 Caso práctico 2: Botón centrado
<div class="mx-auto w-max mt-8">
<button class="bg-green-600 text-white px-6 py-2 rounded hover:bg-green-700">
Suscribirse
</button>
</div>
🔹 Aquí el botón se centra automáticamente gracias a w-max.
✅ 2. Centrado Vertical con flex + items-center
🔍 ¿Cómo funciona?
Usando display: flex (flex) y alineación vertical con items-center, puedes centrar contenido verticalmente dentro de un contenedor con altura definida (h-screen, por ejemplo).
🧪 Caso práctico 1: Mensaje de mantenimiento
<div class="flex items-center h-screen bg-yellow-100">
<div class="mx-auto text-center">
<h1 class="text-3xl font-bold">¡Estamos actualizando el sitio!</h1>
<p>Vuelve en unos minutos.</p>
</div>
</div>
🔹 El contenedor ocupa toda la pantalla y el contenido se alinea al centro vertical.
🧪 Caso práctico 2: Logo centrado verticalmente
<div class="flex items-center h-screen bg-black">
<img src="/logo.svg" alt="Logo" class="mx-auto w-32" />
</div>
🔹 items-center alinea verticalmente y mx-auto lo complementa horizontalmente.
✅ 3. Centrado Total (Horizontal y Vertical)
🔍 ¿Cómo funciona?
Para centrar ambos ejes puedes usar:
-
flex justify-center items-center -
grid place-items-center
Ambas opciones requieren que el contenedor tenga una altura, como h-screen.
🧪 Caso práctico 1: Formulario centrado
<div class="grid place-items-center h-screen bg-gray-100">
<form class="bg-white p-6 rounded shadow w-80 space-y-4">
<h2 class="text-xl font-bold text-center">Iniciar sesión</h2>
<input type="email" placeholder="Correo" class="w-full border px-3 py-2 rounded" />
<input type="password" placeholder="Contraseña" class="w-full border px-3 py-2 rounded" />
<button class="w-full bg-blue-600 text-white py-2 rounded hover:bg-blue-700">Entrar</button>
</form>
</div>
🔹 place-items-center en grid simplifica el centrado total.
🧪 Caso práctico 2: Página de error 404
<div class="flex justify-center items-center h-screen bg-red-100">
<div class="text-center">
<h1 class="text-4xl font-bold text-red-600">404</h1>
<p>Página no encontrada</p>
</div>
</div>
🔹 Usa flex para centrar contenido de error en toda la pantalla.
🎁 Ejemplo Final Integrado
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Formulario centrado</title>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-gray-200">
<div class="grid place-items-center h-screen">
<form class="bg-white p-8 rounded shadow w-full max-w-sm space-y-4">
<h2 class="text-2xl font-bold text-center">Contáctanos</h2>
<input type="text" placeholder="Nombre" class="w-full border rounded px-3 py-2" />
<input type="email" placeholder="Correo" class="w-full border rounded px-3 py-2" />
<textarea placeholder="Mensaje" class="w-full border rounded px-3 py-2 h-24"></textarea>
<button class="w-full bg-blue-600 text-white py-2 rounded hover:bg-blue-700">Enviar</button>
</form>
</div>
</body>
</html>
🧠 Conclusión
-
✅ Usa
mx-autopara centrar horizontalmente elementos con ancho definido. -
✅ Usa
flex items-centerpara centrar verticalmente dentro de un contenedor alto. -
✅ Usa
grid place-items-centeroflex justify-center items-centerpara centrar completamente en ambos ejes.
Gracias a Tailwind CSS v4, puedes construir interfaces centradas, elegantes y sin escribir ni una sola línea de CSS adicional.
Div Centrado con Tailwind
Div Centrado con Tailwind
Recurso del Tutorial
GratisTutoriales Recomendados
Sigue explorando publicaciones de la misma categoría
