如何让我的图像进入 div 的中心？

【问题标题】：How do I get my image to go in the center of the div?如何让我的图像进入 div 的中心？
【发布时间】：2010-11-09 02:55:57
【问题描述】：

鉴于此 HTML：

<div>
  <img id="image">
</div>

如何让图像进入 div 的中心？

目前它位于 div 的左上角。

我试过了

img#image
{
    text-align:center;
}

但这并没有什么不同。

【问题讨论】：

【解决方案1】：

尝试将位置relative 分配给 div：

#div_id{
  position:relative;
  width:400px;
  height:200px;
}

还有这个图片的 CSS：

#img_id{
  position:absolute;
  top:100px; /* half of parent div's height */
  left:200px;  /* half of parent div's width */
  display:block;
}

【讨论】：

【解决方案2】：

您需要在容器上设置 text-align，如：

<div class="image">
  <img />
</div>    

div.image {
   text-align: center;
}

【讨论】：

【解决方案3】：

<img style='display:block; margin:0 auto' src='...'>

将图像在其容器中居中

【讨论】：

【解决方案4】：

CSS：

div { text-align: center; }
#image { display: inline-block; vertical-align: middle; }

【讨论】：