为什么我的图片不在div的中心

Question

Why my image not in the center(Horizontally, Vertically) of div.

<div>
   <img id = "loader-img" class="centered" alt src="al.gif">
</div>

and my css is:

.centered {
    display: block;
    margin-left: 150px;
    margin-right: 150px;
    margin-bottom: 100px;
    margin-top: 100px;
    height: 200px;
    width: 200px;
   }

Here is how my image looks like in div:

Answer 1

Try This:

 .frame { height: 125px; width: 160px; border: 1px solid red; white-space: nowrap; text-align: center; margin: 1em 0; } .helper { display: inline-block; height: 100%; vertical-align: middle; } img { vertical-align: middle; max-height: 25px; max-width: 160px; } 

 <div class=frame> <span class="helper"></span> <img src="http://www.afew-store.com/js/vigoshop/ajaxcart/ajax-loader.gif" height=250 /> </div> 

Demo Here

Update: As you say that above is the image which you are using then please note that given image itself is not good. As it has white background so its difficult to notice the difference.

I am drawing border around image and posting here again:

Answer 2

Try this:

HTML

<div>
   <img src="al.gif">
</div>

CSS

div {
  display: -webkit-flex;
  display: flex;
}

img {
  margin: auto;
}

And also, your id attribute contains space symbols. You should remove them:

<img id="loader-img" class="centered" src="al.gif">

Answer 3

This works for me:

CSS:

#logo{
  max-width: 100%;
  height: auto;
  width: auto;

HTML:

<div>
   <img id="logo" src= {{image.get('logo').url()}}>
</div>

Answer 4

As requested, this is my solution:

html

<div>
    <img src='http://placehold.it/100x50' />
</div>

css:

div {
    display: flex;
    background: pink;
    height: 200px;
}

img {
    margin:auto;
}

jsfiddle.net/lharby/48o5zd7g (thanks to Zakhar Day).

There are 3 answers in this thread that all work.

There could be something else in your css which is overriding the css rules you are trying to apply? I would strip out the .centered class properties and start with something really simple.