Centralizando dinamicamente um elemento em um contêiner usando CSS

Quando se trata de escrever sobre desenvolvimento, não costumo falar sobre coisas além de PHP e JavaScript, principalmente porque trabalho mais com essas linguagens do que com outras.

Quero dizer, sim, CSS é parte do negócio, assim como HTML, mas é esperado hoje em dia, certo?

Então, se alguma vez houve uma dica rápida para eu oferecer sobre CSS, é isso (embora talvez eu deva escrever mais?). É difícil quando Chris faz um trabalho tão incrível executando CSS Tricks, mas eu discordo.

Enfim, aqui está o problema e a solução.

Centralizando dinamicamente um elemento em um contêiner

A ideia de centralizar dinamicamente um elemento é baseada no seguinte cenário:

• Você está fazendo uma chamada para uma API que responderá com um conjunto de, digamos, imagens assim que a chamada for concluída.
• Você precisa centralizar cada imagem em seu contêiner.
• As imagens não terão uma altura fixa e precisarão ser posicionadas e centralizadas dinamicamente em contêineres na interface do usuário.

Talvez isso ainda seja um pouco geral. Nesse caso, vamos supor que você tenha uma lista (ordenada ou não ordenada, não importa). Eles têm uma altura e largura fixas, e você colocará as imagens, em escala, dentro de cada elemento.

Lembre-se: você não pode colocar coisas como  elementos div dentro de elementos li (porque um div é um elemento de nível de bloco) sem alterá-lo por meio de algum CSS. E queremos evitar isso.

Então, em última análise, a interface do usuário pode ser algo assim (bruto, eu sei):

Se você quiser que cada imagem seja colocada dentro do item da lista, você quer que ela tenha uma certa altura dimensionada e você quer que ela seja centralizada, tente o seguinte trecho de código :

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

A chave para isso, realmente, é o estilo de transformação. De acordo com o MDN :

A função CSS translateY() reposiciona um elemento verticalmente no plano 2D. Seu resultado é um tipo de dados.

Faz sentido?

Pense desta forma: A função translateY pegará um determinado elemento (identificado por seu seletor) e o posicionará usando o valor especificado.

É Sobre Transformações

Você pode usar pixels, porcentagens ou o que for necessário para fazer isso acontecer. Neste caso, são porcentagens (e são negativas). Embora eu esteja usando um exemplo da minha implementação, também é uma dica sobre como usar a função transformY em relação às transformações.

Se a compatibilidade do navegador for importante – o que, em alguns casos, deveria – confira este gráfico. Você está muito bem coberto.