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

http://jsbin.com/ujuce3

Answer 3

Without knowing more about your problem, there are many ways you could approach it.

Most likely, if you set the image as the background of the div (instead of placing it in the HTML), it will solve your problem;

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

Another method I like is to use position:absolute to position the image exactly where I want it.

Also, if you're going to use a method with vertical-align: middle, make sure you apply that to the image, not the containing div.

Answer 4

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.