html - 在 DIV 中水平和垂直居中图像 - 切断溢出

Question

我试图在包含的 div 中将图像的垂直和水平居中(因此我们看到图像的中心/中间)。并切断任何额外的溢出。我现在让它工作得很好，但图像还没有居中。这是 fiddle 链接:http://jsfiddle.net/pp74fb7b/4/

我查看了所有类似的 stackoverflow 问题，但这些解决方案均不适用于我的场景。我也在网上寻找解决方案。这是我最后的选择。

我不能为这个元素使用任何 javascript。我需要一个纯 css 解决方案。

.squaregallerywrap {
width:  285px; 
height: 285px;
}

.squaregallerywrap img {
min-width: 100%;
min-height: 100%;
max-height: 285px;
display:block;
margin:auto;
}

li {    
float: left;
overflow: hidden;
-webkit-transition: 0.4s all linear;
transition: 0.4s all linear;
} 

Answer 1

fiddle :http://jsfiddle.net/pp74fb7b/5/

只需将以下内容添加到图像中:

.squaregallerywrap img{
  position:relative;
  left:50%;
  -moz-transform:translateX(-50%);
  -webkit-transform:translateX(-50%);
  -ms-transform:translateX(-50%);
  -o-transform:translateX(-50%);
  transform:translateX(-50%);
}