CODEWITHSUNDEEP
htmlcssimagecentering
Jérôme Verstrynge
Jérôme Verstrynge

Reputation: 59586

Centering an image vertically and horizontally according to current window size

I have read the other SO questions related this matter, but I could not find an answer to my issue.

I want to center an image horizontally and vertically in a div having width and height equal to 100%. In other words, if someone resizes the browser window, the image should remain in the center of the window, no matter it's current size.

I have tried to JsFiddle something, but cannot make it work.

How can I make it work? Is it possible? Can someone show an operational example in JsFiddle? Thanks!

Upvotes: 0

Views: 162

Answers (2)

deviousdodo
deviousdodo

Reputation: 9172

You can use position fixed and don't even need a wrapper div (you can add it in though if you like):

img {
  position: fixed;
  top: 50%;
  left: 50%;
  margin-top: -16px;
  margin-left: -16px;
}

The margins are half the image size (you mentioned it's known).

Here's the fiddle: http://jsfiddle.net/B68c3/2/

Upvotes: 2

What have you tried
What have you tried

Reputation: 11148

Have you tried CSS like this:

background:url(your_image.jpg) no-repeat center center;

Upvotes: 1

Related Questions