水平居中绝对定位的图像内部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); 
}