Você está vendo a versão anterior da nova experiência da Alura que estamos preparando para você. Em breve, ela ganha uma identidade visual novinha totalmente pensada em potencializar seus estudos!
Solucionado
Nao entendi muito bem como funciona a centralizacao utilizando as propriedades translate(-50%, -50) e position: fixed juntamente com top:50%e left: 50. Porque nao podemos utilizar translate(50%, 50%)? Ao meu ver, ficaria centralizado em ambos os eixos x* e *y.
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!!!