DEV Community

Cover image for Cómo centrar un div horizontalmente
Giancarlo Ramirez
Giancarlo Ramirez

Posted on

Cómo centrar un div horizontalmente

Cansado de sentir verguenza al googlear cómo centrar un div? Cansado de que tires ese centro y que te salga para cualquier lado?, tranquilo, hoy te enseñaré a centrar un div horizontalmente de distintas maneras sin morir en el intento.

ALTERNATIVA 1: Text align
Úsalo cuando tengas elementos de tipo inline, inline-block, inline-flex o inline-table. ¿Pero qué rayos es un elemento inline? Es un elemento que empieza cuando termina el anterior, sin saltar a otra línea y ocupando el máximo de su propio tamaño. Si se acaba el espacio, saltará a una nueva línea.

<div classname="parent">
  <span>Centrado</span>
</div>

<style>
.parent {
  text-align: center;
}
</style>
Enter fullscreen mode Exit fullscreen mode

ALTERNATIVA 2: Márgen automático
Úsalo para centrar un elemento de bloque el cuál tenga un ancho determinado. ¿Pero que carajos es un elemento de bloque? Los elementos de bloque son elementos que forman un bloque separado, es decir, romperan la línea para aparecer en una nueva. Por ejemplo los <div>.

<div classname="parent">
  <div classname="child">Yo mido 150 pixeles</div>
</div>

<style>
.parent {
  margin: 0 auto;
}

.child {
  width: 150px;
}
</style>
Enter fullscreen mode Exit fullscreen mode

ALTERNATIVA 3: Flexbox
Úsalo para centrar varios elementos de bloque. Las propiedades que usaremos serán display: flex; y justify-content: center;. No es necesario que los bloques hijos tengan un ancho específico, a Flexbox no le interesa mucho.

<div classname="parent">
  <div>Hijo 1</div>
  <div>Hijo 2</div>
</div>

<style>
.parent {
  display: flex;
  justify-content: center;
}
</style>
Enter fullscreen mode Exit fullscreen mode

ALTERNATIVA 4: Transformar elementos block a inline block
Úsalo también para centrar varios elementos de bloque, los cuales con css transformaremos a inline. Es como la alternativa 1, alinearemos con text-align: center;, pero a cada hijo lo transformaremos de block a inline-block usando display: inline-block;.

<div classname="parent">
  <div classname="child">Hijo 1</div>
  <div classname="child">Hijo 2</div>
</div>

<style>
.parent {
  text-align: center;
}

.child {
  display: inline-block;
}
</style>
Enter fullscreen mode Exit fullscreen mode

Espero te sea de ayuda este granito de arena.
En el siguiente te muestro cómo centrar verticalmente, vertical y horizontalmente. Saludos.
(:

Top comments (0)

Some comments may only be visible to logged-in visitors. Sign in to view all comments.