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?, calmo, hoy te enseñaré a centrar un div horizontalmente de distintas maneras sin morir en el intento.

대안 1: 텍스트 정렬
Ú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 maximo 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: 플렉스박스
Úsalo para centrar varios elementos de bloque. Las propiedades que usaremos serán display: flex; Y justify-content: center; . Flexbox가 필요하지 않은 이유는 특별한 이유가 없기 때문입니다.

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

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

대안 4: Transformar elementos 블록 인라인 블록
Ú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 inline-block 우산도 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.
(: