Guías Técnicas

Cómo Centrar un Div Usando CSS: Guía Completa para Principiantes

El centrado de elementos en CSS ha sido uno de los temas más discutidos en el diseño web. Con el tiempo, han surgido varias formas de centrar una div de manera eficiente y flexible. Aquí veras 10 formas modernas de hacerlo utilizando solo CSS.

1. Usando flexbox

Una de las formas más populares y sencillas para centrar una div es utilizando flexbox. Esta técnica es ideal para centrar elementos tanto vertical como horizontalmente.

html 
<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Cómo centrar un Div y no morir en el intento</title>
  <style>
    .container {
      display: flex;
      justify-content: center; /* Centrado horizontal */
      align-items: center; /* Centrado vertical */
      height: 100vh; /* Asegura que el contenedor ocupe toda la altura de la ventana */
    }
  </style>
</head>
<body>
  <div class="container">
    <h1>¡Bienvenido a mi página!</h1>
  </div>
</body>
</html>

2. Usando grid

CSS Grid ofrece una forma muy poderosa de centrar elementos en dos dimensiones (horizontal y vertical).

html 
<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Cómo centrar un Div y no morir en el intento</title>
  <style>
    .container {
      display: grid;
      place-items: center; /* Centrado tanto horizontal como vertical */
      height: 100vh; /* Asegura que el contenedor ocupe toda la altura de la ventana */
    }
  </style>
</head>
<body>
  <div class="container">
    <h1>¡Bienvenido a mi página!</h1>
  </div>
</body>
</html>

3. Usando position: absolute con transform

Otra forma clásica de centrar una div es usar position: absolute junto con transform.

html 
<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Cómo centrar un Div y no morir en el intento</title>
  <style>
    .container {
      position: relative;
      height: 100vh;
    }
    .centered {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%); /* Ajusta el elemento para centrarlo */
    }
  </style>
</head>
<body>
  <div class="container">
    <h1 class="centered">¡Bienvenido a mi página!</h1>
  </div>
</body>
</html>

4. Usando inline-block y text-align: center

Aunque menos utilizado hoy en día, esta técnica puede ser útil cuando se está trabajando con elementos en línea.

html 
<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Cómo centrar un Div y no morir en el intento</title>
  <style>
    .container {
      text-align: center;
      height: 100vh;
    }

    .centered {
      display: inline-block;
      vertical-align: middle;
      line-height: normal; /* Ajusta la altura de la línea */
    }
  </style>
</head>
<body>
  <div class="container">
    <h1 class="centered">¡Bienvenido a mi página!</h1>
  </div>
</body>
</html>

5. Usando table y table-cell

Este método simula el comportamiento de una tabla, centrando el contenido dentro de las celdas.

html 
<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Cómo centrar un Div y no morir en el intento</title>
  <style>
    .container {
      display: table;
      width: 100%;
      height: 100vh;
    }
    .centered {
      display: table-cell;
      vertical-align: middle;
      text-align: center;
    }
  </style>
</head>
<body>
  <div class="container">
    <h1 class="centered">¡Bienvenido a mi página!</h1>
  </div>
</body>
</html>

6. Usando margin: auto con width

Si tu elemento tiene un ancho fijo, puedes centrarlo horizontalmente utilizando márgenes automáticos.

html 
<!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 margin: auto</title>
  <style>
    body {
      margin: 0;
      padding: 0;
      height: 100vh;
      display: flex;
      align-items: center; /* Centrado vertical */
      justify-content: center; /* Centrado horizontal */
      background-color: #f0f0f0;
    }
    .centered {
      width: 300px; /* Ancho del div */
      height: 150px; /* Alto del div */
      margin: auto; /* Centrado horizontal */
      background-color: #4caf50;
      color: white;
      display: flex;
      align-items: center;
      justify-content: center;
      text-align: center;
      font-size: 1.2em;
      border-radius: 8px;
    }
  </style>
</head>
<body>
  <div class="centered">¡Soy un div centrado!</div>
</body>
</html>

7. Usando flex con min-height

Esta técnica es útil cuando deseas centrar una div dentro de un contenedor de altura dinámica.

html 
<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Cómo centrar un Div y no morir en el intento</title>
  <style>
    body,
    html {
      margin: 0;
      padding: 0;
    }
    .container {
      display: flex;
      justify-content: center;
      align-items: center;
      min-height: 100vh;
    }
  </style>
</head>
<body>
  <div class="container">
    <h1>¡Bienvenido a mi página!</h1>
  </div>
</body>
</html>

8. Usando position: relative y margin-top

Una técnica clásica para centrar un elemento verticalmente es usar position: relative y ajustar el margin-top.

html 
<!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 position: relative y margin-top</title>
  <style>
    body,
    html {
      margin: 0;
      padding: 0;
      height: 100%;
    }
    .container {
      position: relative; /* Contenedor de referencia */
      height: 100vh; /* Altura total de la ventana */
      background-color: #f0f0f0;
    }
    .centered {
      position: relative;
      width: 300px;
      margin: 50% auto 0; /* Centrado horizontal con auto, vertical con 50% */
      transform: translateY(-50%); /* Ajuste hacia arriba para centrar verticalmente */
      background-color: #4caf50;
      color: white;
      text-align: center;
      padding: 20px;
      border-radius: 8px;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="centered">¡Soy un div centrado!</div>
  </div>
</body>
</html>

9. Usando calc() para la propiedad margin-top

La función calc() se puede utilizar para calcular el margen superior, centrándolo verticalmente.

html 
<!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 calc() y margin-top</title>
  <style>
    body,
    html {
      margin: 0;
      padding: 0;
      height: 100%;
    }
    .container {
      height: 100vh; /* Altura completa de la ventana */
      background-color: #f0f0f0;
    }
    .centered {
      width: 300px;
      height: 150px; /* Alto del div */
      margin: calc(50vh - 75px) auto 0; /* Centrado vertical con calc(), horizontal con auto */
      background-color: #4caf50;
      color: white;
      text-align: center;
      padding: 20px;
      border-radius: 8px;
      line-height: 150px; /* Opcional: centra el texto dentro del div */
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="centered">¡Soy un div centrado!</div>
  </div>
</body>
</html>

10. Usando viewport con flexbox

Otra forma de aprovechar el espacio disponible en la pantalla es utilizando viewport con flexbox para un centrado responsivo.

html 
<!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 viewport con flexbox</title>
  <style>
    body,
    html {
      margin: 0;
      padding: 0;
      height: 100%;
    }
    .container {
      display: flex;
      justify-content: center;
      align-items: center;
      min-height: 100vh;
    }
    .centered {
      max-width: 90%; /* Ajusta el ancho */
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="centered">¡Soy un div centrado!</div>
  </div>
</body>
</html>
  Conclusión

El centrado de elementos con CSS es más fácil que nunca gracias a las nuevas propiedades y técnicas disponibles. Flexbox y CSS Grid se han convertido en las opciones más recomendadas por su flexibilidad y facilidad de uso.