在较小的 div 中垂直居中大图像答案

【问题标题】：Centering large Images vertically in a smaller div在较小的 div 中垂直居中大图像
【发布时间】：2010-09-04 11:30:10
【问题描述】：

我有一个问题让我有点发疯。我有一个包含较大图像（没有固定尺寸）的小 div

我正在拍摄这张较大的图像，并为其设置 100% 的宽度以缩小以适应框边界，但我需要图像在 div 内垂直居中显示，而不是自上而下。

有没有简单的 CSS 修复方法？我一直在四处寻找，但运气不佳。

Currently:    Intended:
 --------      --------
| div /w |    |overflow|
| image  |     --------    
 --------     | div w/ |
|overflow|    |  image |
| image  |     --------
 --------     |overflow|
               --------

【问题讨论】：

标签： html css vertical-alignment

【解决方案1】：

我会试试这个 CSS：

div.container { width: ?px; height: ?px; overflow: hidden; position: relative; }
div.container img { position: absolute; top: (-50% of image height); left: (-50% of image width); }

【讨论】：

【解决方案2】：

我建议将图像粘贴在 div 中，然后将 div 居中。有详细说明如何做到这一点here。

【讨论】：

【解决方案3】：

在不了解您的问题的情况下，有很多方法可以解决。

如果您将图像设置为 div 的背景（而不是将其放在 HTML 中），很可能会解决您的问题；

div {background: url(image.png) center center no-repeat;}

我喜欢的另一种方法是使用position:absolute 将图像准确定位在我想要的位置。

此外，如果您要使用 vertical-align: middle 的方法，请确保将其应用于图像，而不是包含 div。

【讨论】：