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

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

我拍摄了这张更大的图片，并给它一个100%的宽度来缩小以适应框的边界，但是我需要图片在div内垂直居中显示，而不仅仅是自上而下

有没有一个简单的CSS修复程序？我一直在闲逛，但运气不太好

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

我想试试这个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); }

---

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

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

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

我喜欢的另一种方法是使用

position:absolute

将图像精确定位到我想要的位置

---

此外，如果要使用垂直对齐：中间的方法，请确保将该方法应用于图像，而不是包含的分区。

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