Centering an image in an container that has overflow hidden

Question

I've got some images inside containers. The images are much bigger than their containers, so I am using overflow: hidden; to keep them from overflowing.

Would anyone know how to center the images within their container?

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;
}

OR

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

Answer 2

You could use:

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

Demo