如何将一个img集中在一个div中

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