在div内部水平居中绝对定位的图像，不显示水平滚动条（在移动设备中）

Question

我尝试将此图像置于div中，而不显示水平滚动条。我需要将图像绝对放在div中。

小提琴：http://jsfiddle.net/512t9L6b/

HTML

<div>
    <img src="http://iqtell.com/wp-content/uploads/2013/05/James-Bond.jpg">
</div>

CSS

div {
    position:relative
}
img {
    position:absolute;
    left: 50%;
    -webkit-transform: translate(-50%, 0);
    -moz-transform: translate(-50%, 0);
    -ms-transform: translate(-50%, 0);
    -o-transform: translate(-50%, 0);
    transform: translate(-50%, 0);
}

编辑：按照建议尝试html { overflow-x:hidden }，但它仍然在移动设备中水平滚动。

Answer 1

html {
overflow-x: hidden; 
}

将删除水平滚动条。

Answer 2

这是你想要的吗？

http://jsfiddle.net/OxyDesign/3au44f27/

CSS

*{
    margin:0;
    padding:0;
}
div {
    position:absolute;
    overflow:hidden;
    top:0;
    right:0;
    bottom:0;
    left:0;
}
img {
    position:absolute;
    left: 50%;
    top:50%;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

或者只是水平居中

http://jsfiddle.net/OxyDesign/0cjyfwq8/

CSS

*{
    margin:0;
    padding:0;
}
div {
    position:absolute;
    overflow:hidden;
    top:0;
    right:0;
    bottom:0;
    left:0;
}
img {
    position:absolute;
    left: 50%;
    top:0;
    -webkit-transform: translate(-50%, 0);
    -moz-transform: translate(-50%, 0);
    -ms-transform: translate(-50%, 0);
    -o-transform: translate(-50%, 0);
    transform: translate(-50%, 0);
}