Centering large Images vertically in a smaller div

Question

I have a problem thats driving me a little insane. I have a small div that contains a larger image (of no fixed dimension)

Im taking this larger image, and giving it a width of 100% to scale down to fit within the boxes boundaries, but I need the image to show up vertically centered inside the div rather than just top down.

Is there an easy CSS fix for this? I've been poking around, but not having much luck.

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

Answer 1

I'd try this 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

I would suggest sticking the image in a div and then centering the div. There is a detailed description on how to do this right here.