Centralizacao com translate e position

Olá, Tiago! Tudo bom?

Tanto o top quanto o left pegam o início do elemento para colocar no centro. Então fazer left: 50% faz com que o início do nosso elemento fique no centro, por exemplo.

Mas quando centralizamos algo, precisamos que a metade do nosso elemento esteja no centro da página. Pra ajustar isso, precisamos trazer esse elemento para a esquerda, uma distância igual a metade do seu tamanho.

Uma técnica pra isso é fazer o translate mostrado no curso! Usamos o negativo para representar que estamos trazendo ele pra esquerda e para cima, o positivo é sempre crescendo. Poderíamos fazer da forma que você falou sim (com translate(50%, 50%), mas aí teria que ser bottom: 50% e right: 50% :)

Se você souber o tamanho exato do elemento, também pode fazer com margin negativa!

Fiz um codepen para ilustrar melhor essas três opções:

https://codepen.io/juunegreiros/pen/wbXNwq

Abraços, espero ter ajudado!

Oi, Juliana.

Primeiramente, agradeco a sua disponibilidada para me ajudar. Entao, eu nao entendi o que voce quis dizer e vou enumerar minhas duvidas para ficar melhor a compreensao:

1) O que voce quis dizer com a afirmacao "Mas quando centralizamos algo, precisamos que a metade do nosso elemento esteja no centro da página". Como assim "metade do nosso elemento"?

2) Tendo em vista que left: 50% ou right: 50% centraliza o elemento ao centro horizontalmente, nao deveria centralizar tambem verticalmente colocando top: 50% ou bottom: 50%?

3) Ao utilizar a propriedade translate(50%, 50%), nao deveria centralizar, tambem, horizontalmente e verticalmente?

4) Sei que as duvidas 2 e 3 estao erradas porque na aula o instrutor utiliza ambas as propriedades top e left juntamente com a propriedade translate para centralizar verticalmente e horizontalmente. Mas como que elas funcionam entre si para que possa ocorrer a centralizacao? Porque temos que utilizar estas duas propriedades juntas?

Oi Tiago tudo bem?

Quando mandamos o CSS centralizar nosso elemento ele não pega o centro do elemento e centraliza, mas sim pega o canto superior esquerdo e centraliza.

Por isso que temos que usar o translate para o canto superior esquerdo do elemento se deslocar metade no eixo x e y e virar o centro dele.

Espero ter ajudado!!!

Olá, Tiago!

1 - Essa aqui é exatamente o que o André comentou! Ele pega o canto superior esquerdo para centralizar o nosso elemento. Mas para ficar certinho na página, precisamos que o centro do nosso elemento esteja no centro da página e não o canto dele!

2 - Ele não centraliza o elemento. left: 50%; top: 50%; fala que o canto superior esquerdo tem que estar no centro da página e right: 50%; bottom: 50% que o canto inferior direto tem que estar no centro da página. Ambos "centralizam", mas colocam a ponta do elemento no centro da página e não o centro do elemento.

3 - Não sei se entendi a pergunta muito bem. Translate usa o ponto inicial do elemento (onde o elemento começa) como referência da coordenada. Então, se quisermos que o nosso elemento volte na página (esquerda ou pra cima), precisamos usar o translate negativo. Poderiamos usar o translate(50%, 50%) se tivéssemos usado right: 50%; bottom: 50%. Porque aí queremos que o elemento vá pra frente (baixo e direita).

Antes de responder a quarta, dá uma olhada em como fica sem o translate, apenas com top: 50%; left: 50% e com o right: 50%; left: 50%: https://codepen.io/juunegreiros/pen/wbXNwq

Acontece que, para chegarmos no quadrado verde centralizado, precisamos fazer com que um volte e um vá pra frente, certo? Para fazer esses movimentos, podemos usar o translate, mas não é o único jeito! Você poderia, por exemplo, calcular certinho na mão quanto precisa voltar ou andar com o quadrado pra que ele fique centralizado e aí adicionar calc(50% - valorcalculado) ou adicionar esse valor como margem negativa.

Espero ter ajudado!

Abraços

Se eu entendi corretamente, usar top: 50%; right: 50% ou bottom: 50%; right: 50% irá movimentar o elemento tendo como referência o canto superior esquerdo dele e por esse motivo que não centraliza o objeto, então utilizamos juntamente com translate(50%, 50%) para centralizar corretamente?

Sim exatamente

Porque utilizamos o translate(50%, 50%) junto para centralizar corretamente? Eu entendi que o uso de top:50 e right:50 seria em referencia ao canto superior esquerdo do elemento, mas qual seria a referencia da propriedade translate? Como que estas duas propriedades de complementam fazendo com que alinhe corretamente?

O translate também é em referência ao canto superior esquerdo do elemento. O primeiro atributo é da esquerda para direita, o segundo atributo é de cima para baixo. Quando colocamos 50% nos atributos falamos para ele andar metade do tamanho dele. Se tivéssemos colocado 100% ele ia andar igual ao tamanho dele mas isso não ajudaria a centralizar. Precisamos fazer com que o elemento ande metade do seu tamanho para poder centralizar em conjunto com o top e o right.

Eu agradeco a todos pela ajuda, mas eu realmente nao consegui entender como a centralizacao ocorre utilizando as duas propriedades. Se ambas elas tem como referencia o canto superior esquerdo, como que elas se complementam para centralizar?

Veja nesse exemplo

https://codepen.io/neoandrevictor-the-decoder/full/rErqNa

O quadrado vermelho tava parado lá sem ninguém mecher em sua posição.

Depois temos o quadrado azul que foi deslocado 50% da tela para direita e 50% da tela pra cima.

Mas ele ainda não está centralizado pelo seu centro. Então temos que aplicar o translate.

O quadrado verde tem o translate aplicado e o right e o top também. Ou seja ele já tinha andado pra metade mas não tava totalmente no centro. O canto superior direito que tava no centro. Então com o translate andei metade dele na diagonal pra cima e pra direita aí ele centralizou no centro de si próprio.

Brinque um pouco com esse código (botão change view e depois editor view) e veja como cada coisa se comporta quando alterada. Precisa por a mão na massa e testar como ficaria se fosse um pouco diferente para entender como funciona.

Muito obrigado pela ajuda aos dois!

Disponha e bons estudos!!!