我有一个400px的图像和一个较小的div(宽度并不总是300px，如我的例子)。我想将图像居中在div中，如果有溢出，则隐藏它。
注意：我必须保持这个位置：绝对在行李上。我正在使用css-transitions，如果我使用position：relative，我的图像会抖动一下(http://bit.ly/MaYbMB)。
的jsfiddle
http://jsfiddle.net/wjw83/1/
解决方法
你应该让容器相对并给它一个高度，你就完成了。
http://jsfiddle.net/jaap/wjw83/4/
- .main {
- width: 300px;
- margin: 0 auto;
- overflow: hidden;
- position: relative;
- height: 200px;
- }
- img.absolute {
- left: 50%;
- margin-left: -200px;
- position: absolute;
- }
- <div class="main">
- <img class="absolute" src="http://via.placeholder.com/400x200/A44/EED?text=Hello" alt="" />
- </div>
- <br />
- <img src="http://via.placeholder.com/400x200/A44/EED?text=Hello" alt="" />
如果您愿意，还可以通过添加负边距和顶部位置来垂直居中图像：http://jsfiddle.net/jaap/wjw83/5/
