為什么我的圖片不在div的中心

Question

為什么我的圖片不在div的中心（水平，垂直）。

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

而我的CSS是：

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

這是我的圖像在div中的樣子：

Answer 1

嘗試這個：

 .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> 

在這里演示

更新：正如您所說的，以上是您正在使用的圖像，請注意，給定的圖像本身不是很好。 由於它具有白色背景，因此很難注意到其差異。

我在圖像周圍繪制邊框並再次在此處發布：

Answer 2

嘗試這個：

HTML

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

CSS

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

img {
  margin: auto;
}

而且，您的id屬性包含空格符號。 您應該刪除它們：

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

Answer 3

這對我有用：

CSS：

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

HTML：

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

Answer 4

根據要求，這是我的解決方案：

HTML

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

CSS：

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

img {
    margin:auto;
}

jsfiddle.net/lharby/48o5zd7g （感謝Zakhar Day）。

這個線程有3個答案，所有的答案都起作用。

您的CSS中可能還有其他內容要覆蓋您嘗試應用的CSS規則？ 我將刪除.centered類屬性，並從一些非常簡單的內容開始。