Cómo centrar un div: Tailwind, Bootstrap, CSS y HTML

Centrar un div tanto horizontal como verticalmente es una tarea común en el desarrollo web. A continuación, te mostraré cómo lograrlo utilizando diferentes enfoques: Tailwind, Bootstrap y CSS puro con Flexbox, Grid y Absolute Positioning, así como con HTML sin css.

Cómo centrar un div: Tailwind, Bootstrap, CSS y HTML

1. Centrar un div con Tailwind CSS

Usando Flexbox

<div class="flex items-center justify-center h-screen">
  <div class="bg-blue-500 text-white p-6">Centrado</div>
</div>

Explicación:

• flex activa Flexbox.
• items-center centra verticalmente.
• justify-center centra horizontalmente.
• h-screen hace que el contenedor ocupe toda la altura de la pantalla.

Usando Grid

<div class="grid place-items-center h-screen">
  <div class="bg-green-500 text-white p-6">Centrado</div>
</div>

Explicación:

• grid activa CSS Grid.
• place-items-center centra el contenido en ambas direcciones.

Usando Absolute Positioning en Tailwind

<div class="relative h-screen">
  <div class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 bg-purple-500 text-white p-6">Centrado</div>
</div>

Explicación:

• relative establece el contenedor como referencia.
• absolute coloca el div en una posición absoluta.
• top-1/2 left-1/2 lo posiciona en el centro.
• transform -translate-x-1/2 -translate-y-1/2 lo ajusta para centrarlo completamente.

2. Centrar un div con CSS

Usando Flexbox

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

<div class="container">
  <div class="box">Centrado</div>
</div>

Usando Grid

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

Usando Absolute Positioning

.container {
  position: relative;
  height: 100vh;
}
.box {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

3. Centrar un div con Bootstrap

Usando Flexbox

<div class="d-flex justify-content-center align-items-center vh-100">
  <div class="bg-primary text-white p-4">Centrado</div>
</div>

Usando Grid

<div class="container d-grid vh-100">
  <div class="row justify-content-center align-items-center h-100">
    <div class="col-auto bg-danger text-white p-4">Centrado</div>
  </div>
</div>

Usando Absolute Positioning en Bootstrap

<div class="position-relative vh-100">
  <div class="position-absolute top-50 start-50 translate-middle bg-warning text-dark p-4">Centrado</div>
</div>

Explicación:

• position-relative en el contenedor define la referencia.
• position-absolute en el div lo coloca absolutamente.
• top-50 start-50 lo mueve al centro.
• translate-middle lo ajusta correctamente.

4. Centrar un div con solo HTML

Si no quieres usar CSS, puedes recurrir a la etiqueta <center> en HTML (aunque no es recomendada por ser obsoleta):

<center>
  <div>Centrado</div>
</center>

Pero lo mejor es utilizar CSS para lograr un diseño responsivo y moderno.

5. Otras técnicas para centrar un div

Existen métodos adicionales que, aunque menos usados en la actualidad, pueden ser útiles en ciertos contextos:

Usando margin: auto (para centrado horizontal)

Si defines un ancho para el div, puedes centrarlo horizontalmente con:

.box {
  width: 200px;
  margin: 0 auto;
}

Este método es sencillo, pero únicamente centra el elemento horizontalmente, por lo que no resulta ideal si también necesitas el centrado vertical.

Usando text-align: center en el contenedor

Cuando el elemento hijo es de tipo inline o inline-block, puedes centrarlo horizontalmente con text-align: center en el contenedor:

.parent {
  text-align: center;
}
.child {
  display: inline-block;
}

Este método es útil para centrar elementos de línea o imágenes, aunque no afecta al centrado vertical.

Usando display table y vertical-align

Antes de la popularización de Flexbox y Grid, se utilizaba una técnica basada en display: table y vertical-align:

.container {
display: table;
width: 100%;
height: 100vh;
}
.box {
display: table-cell;
vertical-align: middle;
text-align: center;
}

Aunque es menos flexible y moderno, puede ser una solución compatible con navegadores antiguos.

Conclusión

Existen diversas formas de centrar un div, dependiendo del framework o metodología que prefieras y de las necesidades específicas de tu diseño. Tailwind y Bootstrap facilitan el proceso con clases predefinidas, mientras que CSS puro ofrece un control más detallado.

Además, métodos tradicionales como margin: auto, text-align: center o el uso de table y vertical-align pueden ser útiles en escenarios concretos. ¡Elige la técnica que mejor se adapte a tu proyecto y a la compatibilidad que requieras!