Centrado de imágenes grandes verticalmente en un div más pequeño

Question

Tengo un problema que me está volviendo un poco loco. Tengo un pequeño div que contiene una imagen más grande (sin dimensión fija)

Estoy tomando esta imagen más grande, y le doy un ancho del 100% para ajustarla dentro de los límites de las cajas, pero necesito la imagen para aparecer centrado verticalmente dentro del div en lugar de simplemente descender.

¿Existe una solución de CSS fácil para esto? Estuve hurgando, pero sin mucha suerte.

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

Answer 1

Sin saber más acerca de su problema, hay muchas maneras que usted puede acercarse a él.

Es muy probable que si configura la imagen como fondo del div (en lugar de colocarla en el HTML), resuelva su problema;

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

Otro método que me gusta es usar position:absolute posicionar la imagen exactamente donde yo quiero.

Además, si va a utilizar un método con vertical-align: middle, asegúrese de aplicarlo a la imagen, no a la div que contiene.

Answer 2

me gustaría probar este 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 3

Sugeriría pegar la imagen en un div y luego centrar el div. Hay una descripción detallada sobre cómo hacer esto bien here.