将大图像垂直居中放置在较小的 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 居中。有关如何正确执行此操作的详细说明此处< /strong>。

Answer 3

在不进一步了解您的问题的情况下，您可以通过多种方法来解决它。

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

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

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

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