22 mayo, 2025
Cómo Centrar un Div con Tailwind CSS
Aprende diferentes formas de centrar un div o contenido en una página web utilizando clases de Tailwind CSS. Explora técnicas de diseño web con este popular framework CSS.
Suscríbete a nuestro canal en Youtube
SuscríbirseCentrar 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.
Leido 11449 veces | 1 usuarios
Descarga del código fuente TailwindCSS de Cómo Centrar un Div con Tailwind CSS
Accede al código fuente esencial de nuestra aplicación en formato ZIP ó TXT. Ideal para desarrolladores que desean personalizar o integrar nuestra solución.
Opciones de descarga
- Usuarios Registrados: Inicia sesión para descarga inmediata.
- Nuevos Usuarios: Regístrate y descarga.
