如何在 div 中垂直居中 img？答案

【问题标题】：How do I vertically center an img in a div?如何在 div 中垂直居中 img？
【发布时间】：2012-12-09 17:15:32
【问题描述】：

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

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

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

【问题讨论】：

也许这会有所帮助：How to vertically align an image in unknown size to the center of a div?
你试过使用 position:absolute 吗？
@imulsion 我想不出使用absolute 定位照片的方法。我看到很多人提到使用 50% 或其他百分比，但如果您的图片大小不同，这将不起作用。
我已经看到了@Kobi，但对于这种常见的情况来说，它似乎太老套了。真的希望有人知道它是如何完成的。
其实，你唯一缺少的是line-height:400px;:jsfiddle.net/kobi/ZfMYy/5（我链接的问题有一个额外的要求，它比它的容器大）

标签： css vertical-alignment

【解决方案1】：

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

如果您的 <div> 中没有其他文本（可能只有一行），这很有用。

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

【讨论】：

【解决方案2】：

在您的 css 类中添加规则：

 {vertical-align:middle;}

【讨论】：

【解决方案3】：

html, body, #wrapper {
   height:100%;
   width: 100%;
   margin: 0;
   padding: 0;
   border: 0;
}
#wrapper td {
   vertical-align: middle;
   text-align: center;
}


<html>
<body>
   <table id="wrapper">
      <tr>
         <td><img src="logo.png" alt="" /></td>
      </tr>
   </table>
</body>
</html>

【讨论】：

表格风格不好@kobi 展示了如何使用适当的语义 HTML 并在您的 img 上使用 vertical-align: middle 简单地完成此操作。
我知道它的风格很糟糕，但桌子有时是 gr8。

【解决方案4】：

正如@kobi 在评论中提到的，您需要做的就是在包含div 上设置一个line-height。没有桌子。

jsFiddle example of vertically centered image

【讨论】：