Css div标记中垂直居中的图像

可能重复：

我如何将div标签中的图像设置在准确的中心位置

---

我只能找到文本对齐的辅助线：居中；，这是在中间，但不调整垂直高度。

< P>假设你知道你的图像的高度，绝对地用顶：50%和一个顶边，是图像的一半高度。因此，对于100x100图像：

div.imgContainer
{
    position: relative;
}
div.imgContainer > img
{
    position: absolute;
    top: 50%;
    margin-top: -50px;
    left: 50%;
    margin-left: -50px;
}

---

动态垂直居中有两个选项

您可以使用Javascript获取元素的高度，然后进行一些计算，将元素的顶部设置为父元素高度的一半减去元素的一半。 您可以使用display:table和percentage使其正确对齐，如所示。

---

我在线条高度和垂直对齐方面也有一些运气，但这不是动态的。

有一个技巧可以在线条高度方面做到这一点：

<div style="
height: /*div height in px here */ px; 
line-height: /*div height in px here */ px;
text-align:center;">

<img src="URL" style="vertical-align:middle;" />

</div>

---

位置居中一直是css的一个问题。上面所有的建议都有效，但每一个都有一点刺耳的感觉。如果您不需要支持IE或Opera，请开始使用html5 flexible box模型，它非常棒：

---

继续搜索，这个问题被问了很多。

.centerbox {
  /* basic styling */
  width: 350px;
  height: 95px;
  font-size: 14px;
  border: 1px solid #555;
  background : #CFC;

  /* flexbox, por favor */
  display: -webkit-box;
  -webkit-box-orient: horizontal;
  -webkit-box-pack: center;
  -webkit-box-align: center;

  display: -moz-box;
  -moz-box-orient: horizontal;
  -moz-box-pack: center;
  -moz-box-align: center;

  display: box;
  box-orient: horizontal;
  box-pack: center;
  box-align: center;
}