css - 如何在 div 中垂直居中 img？

Question

我有一个 <img>我想以 <div> 为中心.我在这里找到的所有以前的答案都使用了一些 hack 或要求您知道图像的宽度，这在我的情况下有所不同。

水平居中 text-align: center在 parent 身上很容易。我不知道如何垂直对齐。

jsFiddle example

仅供引用，Facebook 仅使用 HTML 和 CSS 就可以很好地做到这一点。所以请不要 <table>或 javascript 黑客。看起来他们正在使用 line-height 的东西使他们的<img>垂直居中。

Answer 1

记住 vertical-align: middle;本身没有用，您还需要设置行高:line-height:400px; .

如果您的 <div> 中没有其他文本，这很有用(除了一行)。

工作示例:http://jsfiddle.net/kobi/ZfMYy/5/