Frecuentemente existe la necesidad de centrar cierta parte de nuestro contenido y en este tutorial te mostramos como hacerlo usando varios métodos CSS:

Contenidos ocultar
1 Método 1: Usando flex.
2 Método 2: Usando grid.
3 Método 3. Usando Bootstrap 5.
4 Método 4: Usando margin: auto

Método 1: Usando flex.

El primer método para centrar contenido en CSS es utilizando la propiedad display: flex. Esta propiedad permite crear un contenedor flexible que puede alinear y distribuir el espacio entre los elementos hijos. Para centrar tanto vertical como horizontalmente un elemento, podemos usar las propiedades justify-content: center y align-items: center.

Ejemplo:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    .contenedor {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
    }

    .centrado {
      background-color: lightblue;
      padding: 20px;
    }
  </style>
  <title>Centrar contenido con CSS</title>
</head>
<body>
  <div class="contenedor">
    <div class="centrado">
      Contenido centrado
    </div>
  </div>
</body>
</html>

Método 2: Usando grid.

Otro método para centrar contenido en CSS es usando la propiedad display: grid. El sistema de grid nos permite crear diseños complejos dividiendo el contenedor en filas y columnas. Para centrar un elemento tanto vertical como horizontalmente, podemos usar las propiedades place-items: center y place-content: center.

Ejemplo:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    .contenedor {
      display: grid;
      place-items: center;
      place-content: center;
      height: 100vh;
    }

    .centrado {
      background-color: lightblue;
      padding: 20px;
    }
  </style>
  <title>Centrar contenido con CSS</title>
</head>
<body>
  <div class="contenedor">
    <div class="centrado">
      Contenido centrado
    </div>
  </div>
</body>
</html>

Método 3. Usando Bootstrap 5.

Bootstrap 5 es un popular framework CSS que nos permite crear diseños responsivos de forma sencilla. Para centrar contenido en Bootstrap 5, podemos utilizar las clases d-flex, justify-content-center, y align-items-center.

Ejemplo:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link href="bootstrap.min.css">
  <title>Centrar contenido con Bootstrap 5</title>
</head>
<body>
  <div class="contenedor d-flex justify-content-center align-items-center" style="height: 100vh;">
    <div class="centrado" style="background-color: lightblue; padding: 20px;">
      Contenido centrado
    </div>
  </div>
</body>
</html>

Método 4: Usando margin: auto

Vamos a nuestro código HTML y definimos lo que ira centrado de la siguiente forma:

<div id=“contenedor”>
<p>Aquí puede ir cualquier tipo de contenido, imágenes, texto y lo que deseemos</p>
</div>

Dentro de nuestro hoja de estilo o apartado CSS definimos la clase “contenedor” de la siguiente forma

<style type="text/css">
body{text-align:center;}
#contenedor{margin: 0px auto;}
</style>

La propiedad auto en el contenedor es quien realiza la labor de centrar, pero en IE 6.0 y anteriores no reconoce esta propiedad por lo que hacemos un pequeño hack y en el body definimos un texto alineado al centro, que termina centrando todo el contenido de nuestro contenedor.

Ojala que les sirva 🙂