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

Question

我有一个问题让我有点疯狂。我有一个小div，包含一个更大的图像（没有固定的维度）

我拍摄这个较大的图像，并给它100％的宽度缩小以适应框边界，但我需要图像垂直居中显示在div内，而不是仅仅自上而下。

这是否有简单的CSS修复？我一直在四处寻找，但没有太多运气。

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

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

Answer 2

我建议将图像粘贴在div中，然后将div居中。有关如何正确执行此操作的详细说明here。

Answer 3

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

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

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

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

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