如何在div内垂直居中图像

Question

我有这样的标记:

<div>
  <img />
</div>

div高于img:

div {
  height: 100px;
}

img {
  height: dynamic-value-smaller-than-100px;
}

我需要将图像放在div的中间(在其上方和下方具有相同的空白区域).

我尝试过这个并不起作用:

div {
  vertical-align: middle;
}

Answer 1

如果你的图像纯粹是装饰性的,那么将它用作背景图像可能是一种更具语义性的解决方案.然后,您可以指定背景的位置

background-position: center center;

如果它不是装饰性的并且构成有价值的信息那么img标签是合理的.在这种情况下,您需要做的是使用以下属性设置包含div的样式:

div{
    display: table-cell; vertical-align: middle 
}

了解更多关于这里这个技术.报告不适用于IE6/7(适用于IE8).

Answer 2

另一种方法是在容器div中设置行高,并使用vertical-align:middle将图像对齐.

HTML:

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

CSS:

.container {
  width: 200px; /* or whatever you want */
  height: 200px; /* or whatever you want */
  line-height: 200px; /* or whatever you want, should match height */
  text-align: center;
}

.container > img {
  vertical-align: middle;
}

这是我的头脑.但我以前用过这个 - 它应该可以解决问题.适用于旧版浏览器.

Answer 3

假设您想将图像(40px X 40px)放在div class ="box"的中心(水平和垂直)上.所以你有以下html:

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

你要做的是应用CSS:

.box img {
    position: absolute;
    top: 50%;
    margin-top: -20px;
    left: 50%;
    margin-left: -20px;
}

你的div甚至可以改变它的大小,图像将始终位于它的中心.

Answer 4

这是我以前用于完成CSS垂直居中的解决方案.这适用于所有现代浏览器.

http://www.jakpsatweb.cz/css/css-vertical-center-solution.html

摘抄:

  <div style="display: table; height: 400px; position: relative; overflow: hidden;">
    <div style="position: absolute; top: 50%;display: table-cell; vertical-align: middle;">
      <div style="position: relative; top: -50%">
        any text<br>
        any height<br>
        any content, for example generated from DB<br>
        everything is vertically centered
      </div>
    </div>
  </div>

(用于演示目的的内联样式)