6

Possible Duplicate:
How to make an image center (vertically & horizontally) inside a bigger div

I have a div which is with absolute position (width/height are 100%). Notice, not px, percents.
Inside this div I have an image. How do I center this image in this div?

Community
  • 1
  • 1
ruby_newbie
  • 129
  • 1
  • 2
  • 7

1 Answers1

8

CSS:

/* where margin-left = {img width}/2, and margin-top= {img height}/2 */
.bigdiv {
   width:100%;
   height:100%;
   position:absolute;
}
.bigdiv img {
   position:absolute;
   left:50%;
   top:50%;
   margin-left:-10px;
   margin-top:-10px;
}

HTML:

<div class="bigdiv"><img src="eg.png" /></div>

You could also put your margin-left, margin-top commands as a style on the img tag instead (since they're unique per image).

Rudu
  • 15,682
  • 4
  • 47
  • 63
  • Your example works but add horizontal and vertical scrolls on Safari 5.0.3 (Mac OS X 10.6.6) My image is 100px/100px so the values of margin(left|right) are -50px How to fix that ? – ruby_newbie Feb 03 '11 at 20:00
  • That's like the default `body` padding safari puts in, try adding CSS: `body {margin:0;padding:0;}` – Rudu Feb 03 '11 at 20:08