Центрирование изображения в контейнере с переполнением скрытым

Question

У меня есть несколько изображений внутри контейнеров. Изображения намного больше, чем их контейнеры, поэтому я использую overflow: hidden;, чтобы они не переполнялись.

Кто-нибудь знает, как центрировать изображения в контейнере?

http://jsfiddle.net/tmyie/v6U8U/1/

*, *:before, *:after { 
-moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; 
} 

.grid { 
    width: 300px; 
    height: 500px; 
    border: 1px solid red; 
} 

.grid-item { 
    float: left; 
    width: 25%; 
    overflow: hidden; 
    height: 50%; 
    position: relative; 
    border: 1px solid green; 
} 

.grid-item img { 
    height: 100%; 
} 

Answer 1

.grid-item img { 
    height: 100%; 
    left: -50%; 
    position: relative; 
} 

ИЛИ

.grid-item img { 
    height: 100%; 
    margin-left: -50%; 
} 

Answer 2

Вы могли бы использовать:

.grid-item img { 
    margin-left: -50%; 
} 

Demo