html - 如何在 div 中居中 img

Question

我正在尝试一些应该很容易的东西，但我不知道怎么做。

我有这样的html源：

<div class="product">
  <img src="product123.png" />
</div>`

还有一些CSS：

.product {
    width: 460px;
    height: 460px;
}

.product img {
      margin: auto;
      display: block;
}

我的图像水平对齐但不是垂直对齐。我尝试了一些position: relative; / bottom: 0;功能，但它没有改变任何东西......

有什么想法吗？

谢谢您的帮助 ！

PS：我在带有 CSS 的 <DIV> 中找到了这个解决方案中心 <IMG/>，但我宁愿保持这样的 HTML，而且无法以“我的”方式做到这一点似乎令人难以置信。

Answer 1

试试这个 - http://jsfiddle.net/tG9UK/

.product {
    width: 460px;
    height: 460px;

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

Answer 2

.product {
    width: 460px;
    height: 460px;
    line-height:460px;
    text-align:center;
}

http://jsfiddle.net/EHTeL/1/

Answer 3

如果图像尺寸是静态的，那么这样的东西对你有用

.product img {
   position: absolute;
   top: 50%;
   left: 50%;
   width: 300px;
   height: 300px;
   margin-top: -150px; /* Half the height */
   margin-left: -150px; /* Half the width */
}

Answer 4

如果你想垂直和水平居中，你应该能够应用 display: table-cell 到 div 并使用 vertical-align

.product {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
    width: 460px;
    height: 460px;
}
.product img {
    margin: auto;
    display: block;
}