Centrar etiquetas HTML con CSS

Programando una página web a veces nos enfrentamos a problemas al centrar un elemento HTML 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 entiendas el problema, escoger la mejor técnica será mucho más fácil.

Así que veamos algunas situaciones y discutamos el mejor método para alcanzar la meta.

Centrar horizontalmente

• Centrar texto

Podemos centrar fácilmente el texto de un elemento con el siguiente código css:

/* Alinear texto al centro */
.center
{
     text-align: center;
} 

• Centrar un elemento contenedor

Podemos centrar un elemento dándole el margen izquierdo y margen derecho de auto (que tiene un ancho específico conocido):

/* Centra un elemento de longitud definida */
/* Recuerda definir el ancho del elemento de lo contrario
será de ancho completo y 'auto' no funcionará */
.center 
{
    margin: 0 auto;
    width: 200px;
} 

• Centrar más de un elemento contenedor.

Si tenemos dos o más elementos contenedores a nivel de bloque que deben centrarse horizontalmente en una fila y ponerlos linealmente, utilizaríamos el siguiente código

Centrar Verticalmente

• Centrar verticalmente un elemento HTML

Podemos centrar verticalmente un elemento dentro de un elemento contenedor de la siguiente manera:

/* Establecer la visualización de la clase padre como tabla */
.parent
{
  display: table;
  height: 250px;
  background: white;
  width: 240px;
  margin: 20px;
}


/* Establecer la visualización de la clase secundaria como tabla-celda */
.child
{
  display: table-cell;
  margin: 0;
  background: black;
  color: white;
  padding: 20px;
  border: 10px solid white;
  vertical-align: middle;
} 

• Centrar elemento contenedor de altura conocida.

Podemos centrar fácilmente un elemento verticalmente dentro de un elemento de bloque como este:

/* Establecer la posición del padre como relativa          */
.parent 
{
  position: relative;
}

/* Establecer la posición del hijo como absoluto en su clase padre
para que pueda colocarse en cualquier lugar de la clase padre */
.child 
{
  position: absolute;
  top: 50%;
  height: 100px;
  margin-top: -50px; 
} 

• Centrar elementos con altura desconocida.

Podemos centrar fácilmente un elemento contenedor dentro de otro elemento con el siguiente código:

/* Establecer la posición del hijo como absoluto en su clase */
.parent 
{
  position: relative;
}

.child 
{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
} 

Centrar Horizontal y Verticalmente

Centrar elemento con altura y ancho fijos.

Si utiliza márgenes negativos iguales a la mitad de ese ancho y alto, después de haberlo posicionado absolutamente al 50% / 50%

/* Establecer la posición de la clase padre como relativa */
.parent 
{
  position: relative;
} 

/* Establecer márgenes de arriba y la izquierda del elemento a 50% */
.child 
{
  width: 300px;
  height: 100px;
  padding: 20px;
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -70px 0 0 -170px;
} 

• Elemento con altura y anchura desconocidas.

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 hacia el centro:

/* Establecer la posición del padre como relativa */
.parent 
{
  position: relative;
} 

.child 
{
  position: absolute;
  top: 50%; // 
  left: 50%;
  transform: translate(-50%, -50%);
}