Oct 19, 2012

Centering image in the middle of the browser window with CSS

Recently I needed to center an image in the middle of the window browser, just to make a loading screen for a Phonegap app.

After googling for almost an hour and trying many ways, I just couldn't find the way to center it both vertically and horizontally. Finally , after reading this and trying many of the alternatives that the users have posted, it did the trick.

The CSS code to use is:

#yourimageid{
    position: absolute;
    margin: auto;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

That's it, you don't need to put any more code in order to center your image! It will be always centered and in the middle of the browser, without any stretching applied.

I guess you can use it to center also a div in the middle of the screen, in case you need to put other stuff centered.

No comments:

Post a Comment