CSS | Elementos de centrado

A veces nos enfrentamos a problemas con el centrado de un elemento en una página web. ¿Es realmente tan difícil? No es demasiado difícil centrar un elemento. Hay tantas maneras diferentes de hacerlo. 
Una cosa que necesitamos saber es qué técnica es para qué propósito. Una vez que comprenda el problema, elegir la mejor técnica será mucho más fácil. 
Entonces, veamos alguna situación y discutamos el mejor método para lograr el objetivo. 
 

• Horizontalmente 
  • Elementos en línea 
    Podemos centrar fácilmente un elemento en línea dentro de un elemento de nivel de bloque como este: 

// Aligning text in center
.center
{
     text-align: center;
}

• Elementos a nivel de bloque 
  Podemos centrar un elemento a nivel de bloque dándole margen izquierdo y margen derecho de auto (que tiene un ancho especificado conocido): 
   

// Aligning an element of defined length in center
// Remember to define the width of the element otherwise it
//will be full width and 'auto' will not work
.center
{
    margin: 0 auto;
    width: 200px;
}

• Más de un elemento a nivel de bloque 
  Si tenemos dos o más elementos a nivel de bloque que necesitan estar centrados horizontalmente en una fila, se puede servir mejor convirtiéndolos en un tipo de visualización diferente : inline-block; 
   

.parent
{
  // Aligning the child of this parent in center
  text-align: center;
}
.child
{
  // set the display of child elements
  display: inline-block;
  text-align: left;
}

• Verticalmente 
  • Elementos en línea 
    Podemos centrar fácilmente un elemento en línea dentro de un elemento de nivel de bloque como este: 
     

// Set the display of the parent class as table
.parent
{
  display: table;
  height: 250px;
  background: white;
  width: 240px;
  margin: 20px;
}
 
// Set the display of the child class as table-cell
.child
{
  display: table-cell;
  margin: 0;
  background: black;
  color: white;
  padding: 20px;
  border: 10px solid white;
  vertical-align: middle;
}

• Elementos de nivel de bloque de altura conocida 
  Podemos centrar fácilmente un elemento en línea dentro de un elemento de nivel de bloque como este: 
   

// Set the position of the parent as relative to other         
.parent
{
  position: relative;
}
 
// Set position of the child as absolute in its parent class
// so that it can be placed anywhere in the parent class
.child
{
  position: absolute;
  top: 50%;
  height: 100px;
 
  /* responsible for padding and border
  if not using box-sizing: border-box; */
  margin-top: -50px;
}

• Elementos de nivel de bloque de altura desconocida 
  Podemos centrar fácilmente un elemento en línea dentro de un elemento de nivel de bloque como este: 
   

// Set position of child as absolute in its parent class          
.parent
{
  position: relative;
}
 
// Set top of the child 50% of viewport
// Translate the child by 50% of its height about     
// negative y axis
.child
{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

• Tanto horizontal como verticalmente 
  • Elemento con alto y ancho fijos 
    Usando márgenes negativos iguales a la mitad de ese ancho y alto, después de haberlo posicionado absolutamente al 50% / 50% lo centrará. 

// Set position of parent class as relative
.parent
{
  position: relative;
}
 
// Set top and left of an element of
// known height as 50%
.child
{
  width: 300px;
  height: 100px;
  padding: 20px;
 
  position: absolute;
  top: 50%;
  left: 50%;
 
  margin: -70px 0 0 -170px;
}

• Elemento con altura y ancho desconocidos 
  Cuando no sabemos el ancho o la altura, podemos usar la propiedad de transformación y una traducción negativa del 50% en ambas direcciones al centro: 

// Set position of parent as relative to other
.parent
{
  position: relative;
}
 
// Set top and left of an element of
// known height as 50%. Translate the
// element 50% of its height and width 
// about negative x-axis and negative y-axis
.child
{
  position: absolute;
  top: 50%; //
  left: 50%;
  transform: translate(-50%, -50%);
}

Nota : El ‘.’ El operador se usa en CSS para identificar una clase CSS. En los ejemplos anteriores, la clase principal se usa para diseñar el elemento principal y la clase secundaria se usa para el elemento secundario.