将图像置于隐藏溢出的容器中

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

OR

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

Answer 2

您可以使用：

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

<强> Demo