Como centrar un Div con CSS

Original article: How to Center a Div with CSS

Hay algunos problemas comunes de codificación con los que te puedes encontrar cuando empieces a practicar lo que has aprendido construyendo proyectos.

Un problema común al que te enfrentarás como desarrollador web es cómo colocar un elemento en el centro de una página o dentro de un elemento que actúa como su contenedor. Es el omnipresente problema de "¿Cómo centro un div?".

En este artículo, veremos cómo podemos centrar elementos utilizando varias propiedades CSS. Veremos ejemplos de código en cada sección y una representación visual de los elementos en todos los ejemplos.

Cómo centrar un Div utilizando la propiedad CSS Flexbox

En esta sección, veremos cómo podemos utilizar la propiedad Flexbox de CSS para centrar un elemento horizontalmente, verticalmente y en el centro de una página/contenedor.

Puedes usar una imagen si lo prefieres, pero nosotros usaremos un simple círculo dibujado con CSS. Aquí está el código:

<div class="contenedor">

      <div class="circulo">

      </div>

</div>

.contenedor {
  width: 500px;
  height: 250px;
  margin: 50px;
  outline: solid 1px black;
}

.circulo {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-color: black;
}

El posicionamiento con Flexbox requiere que escribamos el código en la clase del elemento padre o contenedor.

Cómo centrar un Div horizontalmente usando Flexbox

Ahora escribiremos el código para centrar el elemento div horizontalmente. Seguimos haciendo uso del círculo que creamos anteriormente.

.contenedor {
  width: 500px;
  height: 250px;
  margin: 50px;
  outline: solid 1px black;
  display: flex;
  justify-content: center;
}

.circulo {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-color: black;
}

Hemos añadido dos líneas de código para centrar el círculo horizontalmente. Estas son las líneas que hemos añadido:

display: flex;
justify-content: center;

display: flex; nos permite utilizar Flexbox y sus propiedades.

justify-content: center; alinea el círculo al centro horizontalmente.

Aquí está la posición de nuestro círculo:

Cómo centrar un Div verticalmente usando Flexbox

Lo que haremos en esta sección es similar a la anterior, excepto por una línea de código.

.contenedor {
  width: 500px;
  height: 250px;
  margin: 50px;
  outline: solid 1px black;
  display: flex;
  align-items: center;
}

.circulo {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-color: black;
}

En este ejemplo, hemos utilizado align-items: center; para centrar el círculo verticalmente. Recuerda que debemos escribir primero display: flex; antes de especificar la dirección.

Aquí está la posición de nuestro círculo:

Cómo posicionar un Div en el centro usando Flexbox

En esta sección, colocaremos el círculo en el centro de la página utilizando las propiedades de alineación horizontal y vertical de CSS Flexbox. He aquí cómo:

.contenedor {
  width: 500px;
  height: 250px;
  margin: 50px;
  outline: solid 1px black;
  display: flex;
  justify-content: center;
  align-items: center;
}

.circulo {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-color: black;
}

Estas son las tres líneas de código que hemos añadido a la clase contenedor anterior:

display: flex;
justify-content: center;
align-items: center;

Como es de esperar, comenzamos con display: flex; que nos permite utilizar Flexbox en CSS. A continuación, utilizamos las propiedades justify-content (alineación horizontal) y align-items (alineación vertical) para colocar el círculo en el centro de la página.

Esta es la posición de nuestro círculo:

Cómo centrar un Div horizontalmente usando la propiedad margin de CSS

En esta sección, utilizaremos la propiedad margin para centrar nuestro círculo horizontalmente.

Volvamos a crear nuestro círculo.

<div class="contenedor">

      <div class="circulo">

      </div>

</div>

.contenedor {
  width: 500px;
  height: 250px;
  margin: 50px;
  outline: solid 1px black;
}

.circulo {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-color: black;
}

Esta vez escribiremos el código en la clase círculo. He aquí cómo:

.contenedor {
  width: 500px;
  height: 250px;
  margin: 50px;
  outline: solid 1px black;
}

.circulo {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-color: black;
  margin: 0 auto;
}

Todo lo que hemos añadido es el margen: 0 auto; línea de código a la clase circulo.

Echemos un vistazo a la posición del círculo:

Cómo centrar texto horizontalmente con la propiedad CSS text-align

En esta sección, veremos cómo centrar texto horizontalmente.

Este método sólo funciona cuando trabajamos con texto escrito dentro de un elemento.

He aquí un ejemplo:

<div class="contenedor">

    <h1>Hello World!</h1>
      
</div>

En el ejemplo anterior, hemos creado un div con una clase de contenedor y un elemento h1 con algo de texto. Esto es lo que aparece en este momento:

Escribamos el código CSS.

.contenedor {
  width: 500px;
  height: 250px;
  margin: 50px;
  outline: solid 1px black;
}

h1 {
  text-align: center;
}

Para alinear el texto del elemento h1 en el centro de la página, tuvimos que utilizar la propiedad text-align, dándole un valor de center. Esto es lo que aparece ahora en el navegador:

Conclusión

En este artículo, vimos cómo podemos centrar elementos horizontalmente, verticalmente y en el centro de la página usando Flexbox y las propiedades margin y text-align en CSS.

En cada sección, vimos tanto un ejemplo de código como una representación visual de lo que hace el código.

¡Feliz codificación!