para mostrar o aviso no centro usei o top 50% e left 50% porem para fixar no centro precisa ainda usar o translate(-50%,-50%) porque?
Solucionado
para mostrar o aviso no centro usei o top 50% e left 50% porem para fixar no centro precisa ainda usar o translate(-50%,-50%) porque?
O problema é que o top e o left são relativos ao canto esquerdo superior do elemento. Então colocar 50% nos 2 faz com que o elemento fique com seu ponto esquerdo superior no meio da tela - mas nao o centro do elemento em si.
O truque do translate é que ele é relativo a posição original do elemento, e suas porcentagens dizem respeito ao tamanho do elemento. Ao colocar -50%, estamos dizendo pra ele deslocar metade da sua altura pra cima, e metade da sua largura pra esquerda.
Na pratica isso deixa o elemento final no centro da tela :)
Dificil explicar com palavras assim. Mas vale a pena vc ir testando no codigo pra pegar a ideia. Tira o top/left e deixa so o translate por exemplo - e vice-versa. Vai testando outras porcentagens pra enxergar pq elas funcionam,