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>

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>

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>

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>

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

Comments

[ew2323219]

Queridos amigos, si quieren jugar en el casino o pasar una noche feliz, les aconsejo que presten atención a esta plataforma fruit splash gratis. Allí podrás saciar tu deseo de apostar y pasar un buen rato. Personalmente, solo esto me ayuda a pasar el tiempo con beneficio y placer