如何在更小容器中垂直居中自适应尺寸的高图片（无需固定偏移）

这问题我太懂了，刚好有两个非常靠谱的方案，完全适配你说的「图片高度动态变化、不能用固定偏移值」的需求，而且实现起来都很简洁👇

方案一：Flex 布局（推荐，代码最简洁） #

利用 flex 布局的 align-items: center 属性，就能轻松让图片在容器内垂直居中，再配合容器的 overflow: hidden 自动裁剪超出部分，完美解决问题。

代码示例： #

.container {
  width: 800px;
  height: 300px;
  border: 2px solid blue;
  overflow: hidden; /* 关键：裁剪超出容器的部分 */
  display: flex; /* 开启 flex 布局 */
  align-items: center; /* 垂直居中对齐子元素 */
}

.container > img {
  width: 100%; /* 图片铺满容器宽度，高度按比例自适应 */
}

<div class="container">
  <img src="//via.placeholder.com/800x400" />
</div>

原理说明： #

• 容器设置 display: flex 和 align-items: center 后，图片会自动在垂直方向上居中对齐；
• 图片设置 width: 100% 后，高度会按原比例缩放（只要原图高度大于容器高度，就会超出容器）；
• 容器的 overflow: hidden 会自动裁剪掉图片上下超出的部分，刚好实现你要的「隐藏顶部和底部多余区域、垂直居中显示中间部分」的效果。

方案二：绝对定位 + Transform（兼容性更强） #

如果需要兼容一些较老的浏览器（比如 IE9+），这个绝对定位的方案会更稳妥，同样不需要固定偏移值，完全适配动态图片高度。

代码示例： #

.container {
  width: 800px;
  height: 300px;
  border: 2px solid blue;
  overflow: hidden; /* 关键：裁剪超出部分 */
  position: relative; /* 为子元素的绝对定位提供参考 */
}

.container > img {
  width: 100%; /* 图片铺满容器宽度 */
  position: absolute;
  top: 50%; /* 先让图片顶部对齐容器垂直中点 */
  transform: translateY(-50%); /* 再让图片向上偏移自身高度的50%，实现真正居中 */
}

<div class="container">
  <img src="//via.placeholder.com/800x400" />
</div>

原理说明： #

• 容器设置 position: relative，让图片的绝对定位以容器为参考；
• 图片的 top: 50% 是让图片的顶部边缘对齐容器的垂直中点，这时候图片还没真正居中；
• transform: translateY(-50%) 是让图片向上偏移自身高度的50%，这样图片的垂直中点就和容器的垂直中点重合了，实现完美居中；
• 最后靠容器的 overflow: hidden 裁剪掉上下超出的部分，不管图片高度怎么变，这个居中逻辑都有效。

内容的提问来源于stack exchange，提问作者Tuo Wang