Need to center image in web page via CSS

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

medium

Try using this :

position: absolute

I solved it this way:

img.class-name{

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

This is a tricky way, but it works:

CSS:

html, body, #wrapper {
   height:100%;
   width: 100%;
   margin: 0;
   padding: 0;
   border: 0;
}
#wrapper td {
   vertical-align: middle;
   text-align: center;
}

HTML:

<html>
<body>
   <table id="wrapper">
      <tr>
         <td><img src="my_cool_image.png" alt="hello world" /></td>
      </tr>
   </table>
</body>
</html>

the universal KISS ("keep it simple and stupid") way:

<p style="text-align: center;"> <img src="myImage.png" /></p>

text-align:center;

vertical-align:middle;

vertical-align

Should to the trick

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.

clear: both; margin: auto;

Solution:

 .centeredImage {
      position: absolute;
      top: 50%;
      left: 50%;
      margin-top: image-height/2;
      margin-left: image-width/2;
    }

since you mentioned:

 margin-top: -50px;
 margin-left: -150px;

And if its aligning properly to the center then your image height would be 50x2=100px; & width 150x2=300px;

user3668989

.image {
    position: fixed;
    margin: auto;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
 }

I did it! This method is rock solid and works on all major browsers.

style="position: fixed; margin: 0 50%; left: -850px; right: 0; top: 0; bottom: 0;"

I have simply used a left of half the width of the image and then shunted it across using margin. Works a treat :)

There is a very simple, cross browser, auto resize method. Taking an image with width of 200px. Take half the width then do the following:

   #imgcent1 {
   left: calc (100% - 100px  /  2 );
   /*rest of code*/
   }

Make sure there is "white space" to avoid negative and positive numbers (best using this convention for all operands). It will auto resize. Just try it and hopefully, testing on other browsers will ensure that it becomes the standard as intended.

Tesserex

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.

A single image on the web & responsive

Background Image:

/image.png

CSS:

html, body { height: 100%; margin: 0px; }

.bg-image {
    width: 100%;
    height: 100%;
    background-image: url(image.png);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;
    text-indent: -9999px;
}

HTML:

<body>
    <div class="bg-image">Some text not displayed</div>
</body>

来源：https://stackoverflow.com/questions/2502206/need-to-center-image-in-web-page-via-css

标签

css

image

center