html - 如何将 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:我找到了这个解决方案 center <IMG/> inside a <DIV> with CSS但我宁愿保持我的 HTML 是这样的，而且不能以“我的”方式做到这一点似乎令人难以置信。

Answer 1

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

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

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