How To Display A Gif In The Middle Of A Div Page In JQuery?

I have a div, which acts as a page, and it only has a gif. Though the gif appears at the upper left corner of the page. I want to make it appear in the middle of the page. Below yo

Solution 1:

Assuming that your div is the size of the page and has position:relative then

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

will get you most of the way.

However, what it does is put the top/left corner of the image at the 50% position and so it is not exactly centered.

If you know the size of the image you can adjust it with negative margins like so

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

So, for instance

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

for a 200x200 image.

If you do NOT know the size of the image (perhaps you'll be changing it often) then you can dispense with the negative margins and just use.

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

This adjusts the final position of the image based on its OWN dimensions regardless of what they might be.

Solution 2:

You are using class selector instead of id selector in css. You can change that to id selector as:

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

Alternatively, you can apply a styling to div to display as table and center it then:

<div style="display:table-cell; vertical-align:middle; text-align:center" data-role="page" data-add-back-btn="false">
<img src="images/correct.gif">
</div>

Solution 3:

wrong css selector

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