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

回答1:

Try using this :

position: absolute

回答2:

I solved it this way:

img.class-name{

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

回答3:

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>

回答4:

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

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

回答5:

text-align:center;

vertical-align:middle;

vertical-align

Should to the trick

回答6:

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.

回答7:

clear: both; margin: auto;

回答8:

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;

回答9:

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

回答10:

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 :)

回答11:

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.

回答12:

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.

回答13:

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