Immagine centro CSS in un div genitore troncato

Question

Come è possibile centrare un img in un tag padre div impostato su overflow: hidden. Cioè, quello che voglio è ritagliare l'immagine ma ritagliare sia a sinistra che a destra in modo che venga visualizzata la parte centrale dell'immagine.

<div class='wrapper'> 
    <img/> 
</div> 

Poi stili qualcosa di simile:

.wrapper { 
    position: absolute; 
    /* position details here */ 
    overflow: hidden; 
} 
.wrapper img { 
    height: 100%; 
    margin-left: -??; //what here? 
} 

-50% sarebbe la larghezza del genitore, ma voglio che la larghezza della IMG stesso.

CSS supportato da CSS è accettabile.

Answer 1

http://codepen.io/gcyrillus/pen/BdtEj

uso text-align, line-height, vertical-align e margine negativo. img praticamente ridotto a zero, si centrerà.

.wrapper { 
    width:300px; 
    text-align:center; 
    line-height:300px; 
    height:300px; 
    border:solid; 
    margin:2em auto; 
    overflow:visible; /* let's see what we slice off */ 
} 
img {margin:-100%;vertical-align:middle; 

    /* to show whats been cut off */ 
    position:relative; 
    z-index:-1; 
} 

Solo orizzontale:

.wrapper { 
     width:300px; 
     text-align:center; 
     border:solid; 
     margin:2em auto; 
     overflow:hidden 
    } 
    img { 
     margin:0 -100%; 
     vertical-align:middle; 
    } 

Answer 2

tenta di aggiungere

display:block; 
margin:0px auto; 

a ".wrapper img"

Answer 3

Hi si prega example

sua risolvere il problema

HTML

<div class='wrapper'> 
    <img border="3"/> 
</div> 

CSS

.wrapper { 
    /*position: absolute;*/ 
    /* position details here */ 
    overflow: hidden; 
    text-align:center 
} 
.wrapper img { 
    height: 100%; 
}