¿Cómo mostrar un gif en medio de una página div en jQuery?

Tengo un div, que actúa como una página, y solo tiene un gif. Aunque el gif aparece en la esquina superior izquierda de la página. Quiero hacer que aparezca en el medio de la página. A continuación puede encontrar mi HTML y CSS que probé, pero no parece estar funcionando.

.correctGIF > img { position: absolute; left: 50%; top: 50%; }

Suponiendo que su div es el tamaño de la página y tiene una position:relative entonces

 #correctGIF > img { position: absolute; left: 50%; top: 50%; display:block; } 

te conseguirá la mayor parte del camino.

Sin embargo, lo que hace es colocar la esquina superior / izquierda de la imagen en la posición del 50% y, por lo tanto, no está exactamente centrado.

Si conoce el tamaño de la imagen, puede ajustarla con márgenes negativos, como

 margin-top: - [Insert 50% of image height] px; margin-left: - [Insert 50% of image width] px; 

Entonces, por ejemplo

 margin-top: -100px; margin-left: -100px; 

Para una imagen de 200×200.

Si NO conoce el tamaño de la imagen (tal vez la vaya a cambiar a menudo), puede prescindir de los márgenes negativos y simplemente utilizar.

 transform: translate(-50%, -50%); 

Esto ajusta la posición final de la imagen en función de sus dimensiones PROPIAS, independientemente de lo que puedan ser.

Está utilizando el selector de clase en lugar del selector de id en css. Puede cambiar eso a selector de ID como:

 #correctGIF > img { position: absolute; left: 50%; top: 50%; } 

Alternativamente, puede aplicar un estilo a div para mostrar como tabla y centrarla luego:

 

selector css incorrecto

 #correctGIF > img { position: absolute; left: 50%; top: 50%; }