我有一个 400 像素的图像和一个较小的 div（宽度并不总是 300 像素，如我的示例所示）。我想在 div 中居中图像，如果有溢出，隐藏它。
注意：我必须保留position:absolute图像上的。我正在使用 css-transitions，如果我使用position:relative，我的图像会有点晃动（https://web.archive.org/web/20120528225923/http://ta6.maxplus.be:8888/）。
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/
以上解决方案都不适合我。我需要一个动态图像大小以适合圆形父容器overflow:hidden
.circle-container {
width:100px;
height:100px;
text-align:center;
border-radius:50%;
overflow:hidden;
}
.circle-img img {
min-width:100px;
max-width:none;
height:100px;
margin:0 -100%;
}
这里的工作示例：http: //codepen.io/simgooder/pen/yNmXer
最新解决方案：
HTML
<div class="parent">
<img src="image.jpg" height="600" width="600"/>
</div>
CSS
.parent {
width: 200px;
height: 200px;
overflow: hidden;
/* Magic */
display: flex;
align-items: center; /* vertical */
justify-content: center; /* horizontal */
}
MELISSA PENTA ( https://www.localwisdom.com/ )找到了这个不错的解决方案
HTML
<div class="wrapper">
<img src="image.jpg" />
</div>
CSS
div.wrapper {
height:200px;
line-height:200px;
overflow:hidden;
text-align:center;
width:200px;
}
div.wrapper img {
margin:-100%;
}
在 div 中居中任何大小的图像
与圆形包装和不同大小的图像一起使用。
CSS
.item-image {
border: 5px solid #ccc;
border-radius: 100%;
margin: 0 auto;
height: 200px;
width: 200px;
overflow: hidden;
text-align: center;
}
.item-image img {
height: 200px;
margin: -100%;
max-width: none;
width: auto;
}
这里的工作示例codepen
对我来说，flex-box 完美地使图像居中。
这是我的 html 代码：
<div class="img-wrapper">
<img src="..." >
</div>
这我用于css：我希望图像与包装元素一样宽，但如果高度大于包装元素的高度，则应该“裁剪”/不显示。
.img-wrapper{
width: 100%;
height: 50%;
overflow: hidden;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
img {
height: auto;
width: 100%;
}
<html>
<head>
<style type="text/css">
.div-main{
height:200px;
width:200px;
overflow: hidden;
background:url(img.jpg) no-repeat center center
}
</style>
</head>
<body>
<div class="div-main">
</div>
</body>
只需确保您如何通过 css 背景使用图像使用背景图像位置，例如背景：url（您的图像路径）不重复中心中心；它会自动将中心与屏幕对齐。
这似乎在我们的网站上工作，使用您的想法和基于包装器 div 左边缘的一些数学。向左 50% 然后取出 50% 的额外边距似乎是多余的，但它似乎有效。
div.ImgWrapper {
width: 160px;
height: 160px
overflow: hidden;
text-align: center;
}
img.CropCenter {
left: 50%;
margin-left: -100%;
position: relative;
width: auto !important;
height: 160px !important;
}
<div class="ImgWrapper">
<a href="#"><img class="CropCenter" src="img.png"></a>
</div>
flex-box后代的工作解决方案：
要点：
wrapper {
width: 80;
height: 80;
overflow: hidden;
align-items: center;
justify-content: center;
}
image {
width: min-content;
height: min-content;
}
我一直在尝试在我最近的网站的这个页面中实现 Jaap 的答案，但有一个区别： .main {height:} 设置为 auto 而不是固定的 px 值。作为响应式开发人员，我正在寻找一种将图像高度与左侧浮动文本元素同步的解决方案，但前提是我的文本高度变得大于我的实际图像高度。在这种情况下，图像不应重新缩放，而应按照上述原始问题中的描述进行裁剪和居中。这可以做到吗？您可以通过慢慢缩小浏览器的宽度来模拟这种行为。
这个问题是一个巨大的痛苦。但我终于明白了。我见过很多复杂的解决方案。这很简单，现在我看到了。
.parent {
width:70px;
height:70px;
}
.child {
height:100%;
width:10000px; /* Or some other impossibly large number */
margin-left: -4965px; /* -1*((child width-parent width)/2) */
}
.child img {
display:block; /* won't work without this */
height:100%;
margin:0 auto;
}