Centrar dinámicamente un elemento en un contenedor usando CSS

Cuando se trata de escribir sobre desarrollo, no suelo hablar de cosas más allá de PHP y JavaScript, principalmente porque trabajo con esos lenguajes más que con otros.

Quiero decir, sí, CSS es parte del trato al igual que HTML, pero se espera en estos días, ¿verdad?

Entonces, si alguna vez tuve un consejo rápido para ofrecer con respecto a CSS, es este (aunque tal vez debería escribir más). Es difícil cuando Chris hace un trabajo increíble ejecutando CSS Tricks, pero estoy divagando.

De todos modos, aquí está el problema y la solución.

Centrar dinámicamente un elemento en un contenedor

La idea de centrar dinámicamente un elemento se basa en el siguiente escenario:

• Está realizando una llamada a una API que responderá con un conjunto de, por ejemplo, imágenes una vez que se complete la llamada.
• Debe centrar cada imagen dentro de su contenedor.
• Las imágenes no tendrán una altura fija y deberán colocarse y centrarse dinámicamente dentro de los contenedores en la interfaz de usuario.

Tal vez esto es todavía un poco general. Si es así, supongamos que tiene una lista (ordenada o desordenada, no importa). Tienen una altura y un ancho fijos, y vas a colocar las imágenes, escaladas, dentro de cada elemento.

Recuerde: no puede colocar cosas como  elementos div dentro de elementos li (porque un div es un elemento a nivel de bloque) sin cambiarlo a través de algún CSS. Y queremos evitar hacer eso.

Entonces, en última instancia, la interfaz de usuario puede verse así (crudo, lo sé):

Si desea que cada imagen se coloque dentro del elemento de la lista, desea que tenga una cierta altura escalada y desea que esté centrada, intente con el siguiente código :

.acme-element {
  position:   relative;
  top:        50%;
  transform:  translateY(-50%);
  height:     auto;
  max-height: 190px;
}

La clave de esto, realmente, es el estilo de transformación. Según MDN :

La función CSS translateY() reposiciona un elemento verticalmente en el plano 2D. Su resultado es un tipo de dato.

¿Tener sentido?

Piénselo de esta manera: la función translateY tomará un elemento dado (identificado por su selector) y lo posicionará usando el valor especificado.

Se trata de transformaciones

Puede usar píxeles, porcentajes o lo que sea que necesite para que esto suceda. En este caso, son porcentajes (y son negativos). Aunque estoy usando un ejemplo de mi implementación, también pretende ser un consejo sobre cómo usar la función transformY en relación con las transformaciones.

Si la compatibilidad del navegador es importante, lo que, en algunos casos, debería serlo, consulte este gráfico. Estás bastante bien cubierto.