div内图片超出屏幕问题及基于百分比实现中间图片居中的技术咨询

嘿，当然可以用百分比属性实现这个居中需求！你遇到的问题是对absolute定位的参考基准理解有点偏差，我来给你捋清楚并修正代码：

为什么left:50%会偏右？ #

当你给绝对定位元素设置left:50%时，是把元素的左上角对齐到父容器的水平中点，而不是元素的中心。所以整个元素会向右偏移自身宽度的一半，看起来就偏右了。left:100%则是把元素左上角对齐到父容器的最右侧，自然就超出屏幕了。

用百分比实现居中的两种方法 #

方法1：transform + 百分比（最灵活推荐）

这种方法用transform: translateX(-50%)，这里的50%是相对于元素自身宽度的百分比，刚好能把元素往左挪自身宽度的一半，完美抵消left:50%带来的偏移，实现真正居中。而且不管图片宽度怎么变，都不用改数值，非常健壮。

修正你的.cont类CSS：

.objectfitt .cont {
  height: 300px;
  width: 300px;
  object-fit: contain;
  border: 3px solid aqua;
  position: absolute;
  left: 50%; /* 把元素左上角移到容器中点 */
  transform: translateX(-50%); /* 往左挪自身宽度的50%，实现中心对齐 */
  top: 50px; /* 替代原来的margin-top，避免absolute元素的margin受其他布局干扰 */
}

方法2：负margin + 百分比（纯百分比实现）

如果你一定要用纯margin的百分比（不依赖transform），需要计算元素宽度占父容器的比例。比如你的图片宽300px，假设父容器是全屏宽度（100vw），那图片宽度占比是30%（以1000px宽屏幕为例），负margin就是-15%（自身宽度占比的一半）：

.objectfitt .cont {
  /* 其他样式不变 */
  left: 50%;
  margin-left: -15%; /* 自身宽度占父容器比例的一半 */
}

不过这种方法局限性大，图片宽度或父容器宽度变化时需要重新计算，所以更推荐第一种方法。

额外的代码优化 #

你原来的CSS里img标签同时写了display: flex和display: inline-block，这会导致冲突（后面的inline-block会覆盖flex），建议删掉其中一个；绝对定位的元素默认是块级，所以可以直接去掉这两个display属性。另外，你给img设置的height:500px和后面子类的height:300px冲突，统一高度会让布局更整齐。

完整修正后的代码 #

CSS

h1 { 
  display: block; 
  background-color: yellow; 
  text-align: center; 
}
.objectfitt { 
  position: relative; 
  min-height: 350px; /* 确保父容器高度能容纳图片，避免布局塌陷 */
}
.objectfitt img { 
  width: 300px; 
  height: 300px; /* 统一图片高度 */
  margin-top: 50px;
}
.objectfitt .cov { 
  object-fit: cover; 
  border: 3px solid red; 
  display: inline-block; /* 保持左对齐 */
}
.objectfitt .cont { 
  object-fit: contain; 
  border: 3px solid aqua; 
  position: absolute; 
  left: 50%; 
  transform: translateX(-50%); 
  top: 50px; /* 和其他图片保持同一起始垂直位置 */
}
.objectfitt .fill { 
  object-fit: fill; 
  border: 3px solid yellow; 
  float: right; /* 保持右对齐 */
}

HTML

<h1>Text</h1>
<div class="objectfitt">
  <img class="cov" src="https://avatars.mds.yandex.net/i?id=e67c20f98bdc512c5d3bc20c140f8fac-5719595-images-taas-consumers&n=27&h=480&w=480">
  <img class="cont" src="https://avatars.mds.yandex.net/i?id=e67c20f98bdc512c5d3bc20c140f8fac-5719595-images-taas-consumers&n=27&h=480&w=480">
  <img class="fill" src="https://avatars.mds.yandex.net/i?id=e67c20f98bdc512c5d3bc20c140f8fac-5719595-images-taas-consumers&n=27&h=480&w=480">
</div>

这样调整后，中间的图片就会完美居中啦！

内容的提问来源于stack exchange，提问作者Jesus Roman