Question

可能重复：
Center an Image vertically and horizontally? css

如何将div标签中的图像设置在正确的中心？

我只能找到text-align:center;的指南，并将其放在中间，但不会调整垂直高度。

Answer 1

动态垂直居中有两种选择。

使用Javascript获取元素的高度，然后进行一些数学运算，将元素的顶部设置为父元素高度的一半减去元素的一半。
您使用display: table和百分比来使其正确对齐，如this article所示。

我也很幸运line-height和vertical-align，但这不是动态的。

Answer 2

位置居中长期以来一直是css的问题。所有上述建议都有效，但每一个都有一点点hacky的感觉。如果您不需要支持IE或Opera，请开始使用非常棒的html5灵活框模型：http://www.html5rocks.com/en/tutorials/flexbox/quick/

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

Answer 3

假设您知道图像的高度，请使用top: 50%绝对定位，并将上边距设置为图像高度的一半。所以对于100x100图像：

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

Answer 4

使用line-height有一个技巧：

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

将图像垂直居中在div标签中

4 个答案: