Need to center image in web page via CSS

Question

I'd like to center an image in a page both vertically and horizontally even when the browser is resized.

Currently, I use this CSS:

.centeredImage {
  position: fixed;
  top: 50%;
  left: 50%;
  margin-top: -50px;
  margin-left: -150px;
}

And this HTML:

<img class="centeredImage" src="images/logo.png">

It centers in FF but not IE (image center is placed at upper left corner). Any ideas?

-Robot

Answer 1

text-align:center;

vertical-align:middle;

vertical-align

Should to the trick

Answer 2

try using position: absolute

Answer 3

If the supplied answers do not work and/or not consistent in each browser you may want to give this a shot:

http://andreaslagerkvist.com/jquery/center/

text-align:center;

Should get it, though.

Answer 4

IE has issues with position: fixed (along with a million other things), so I would advise against that if compatibility is important.

Use position: absolute if the container doesn't have to scroll. Otherwise you'll need some js to adjust the top and left of your image as you do scroll.

text-align: center should work if applied to the image's container, but not to the image itself. But of course that only addresses the horizontal, not vertical. vertical-align: middle doesn't work for me, even with a large enough container.

Auto margins don't work in IE, at least when I test it.

Answer 5

clear: both; margin: auto;