Showing posts with label images. Show all posts
Showing posts with label images. Show all posts

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.