IE9/10下不同比例图片在带内边距容器div中的垂直对齐实现

嘿，我太懂你现在的困扰了——要让各种比例的图片在容器里垂直居中，不管图比容器大还是小，还要留内边距，同时兼容老IE，确实踩过不少坑！我之前试过好几种方案，最后发现表格单元格布局是最能覆盖所有场景且兼容IE9/10的办法，给你详细拆解下：

核心思路 #

IE9和10原生支持display: table-cell，这个属性的vertical-align: middle可以完美实现元素的垂直居中，不管内部元素尺寸如何。我们只需要给.thumb加一个内部容器，用table-cell来承载图片，同时保留内边距和容器的行内块特性。

修改后的代码 #

CSS部分 #

.thumb {
  border: 2px solid #4FA738;
  border-radius: 0.1875rem;
  cursor: pointer;
  display: inline-block; /* 保持原有的行内块布局，不影响排列 */
  margin: 0 0.5rem 0 0;
  transition: 0.2s;
  vertical-align: top; /* 确保容器本身在同行元素中对齐 */
  width: 150px; /* 根据你的需求设置固定宽度，也可以用百分比 */
  height: 150px; /* 固定高度，table-cell需要容器有明确高度才能生效 */
}

.thumb__inner {
  display: table-cell;
  vertical-align: middle; /* 关键：让内部元素垂直居中 */
  text-align: center; /* 同时水平居中 */
  width: 100%;
  height: 100%;
  padding: 0.5rem; /* 这里设置你需要的内边距，不会影响居中效果 */
}

.thumb img {
  max-height: 100%;
  max-width: 100%;
  width: auto;
  height: auto; /* 保留原有的比例自适应设置 */
}

HTML结构调整 #

给.thumb新增一个内部容器thumb__inner来承载图片：

<div class="thumb">
  <div class="thumb__inner">
    <img src="your-image-path.jpg" alt="图片描述">
  </div>
</div>

为什么这个方案能覆盖所有场景？ #

• 小图片居中：当图片尺寸小于容器时，table-cell的vertical-align: middle会自动把图片放在容器垂直中心，同时水平居中，内边距完整保留
• 大图片自适应：当图片尺寸大于容器时，max-width/max-height会让图片按比例缩小到容器内，缩小后的图片依然保持垂直居中
• 不同比例兼容：不管是横版还是竖版图片，都能完美适配，不会出现偏移或拉伸
• IE兼容：IE9和10完全支持display: table-cell，不需要额外的hack

补充说明 #

如果你不需要固定宽高的容器，也可以让.thumb的高度自适应，但需要确保.thumb__inner能继承到足够的高度（比如给.thumb加min-height）。另外，原代码里的font: 0/0 a可以去掉了，因为内部用table-cell布局后，不会有行内块的空格问题。

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