如何实现多图横竖居中且保持固定宽度间距（防止间距拉伸）

我懂你的痛点——当图片高宽比过高或者屏幕被压缩时，原本设定的图片间距（.padding-cell）会被莫名拉得很宽，完全超出了你设置的1.5em，破坏了预期的布局效果。问题根源出在table布局的特性上：table-cell的宽度会随着容器空间自动调整，当图片因为高宽比限制缩小后，table会把多余的空间分配给padding-cell，导致它的宽度失控。

最优解决方案：改用Flex布局 #

Flex布局能精准控制元素的尺寸和间距，完美解决这个问题，同时还能保留图片自动缩放、垂直居中的功能。我们可以直接替换掉table布局，用flex实现需求：

调整后的CSS（HTML结构不需要改动）

.slider-container {
  left: 4.5em;
  right: 4.5em;
  position: fixed;
  top: 4.5em;
  height: calc(100vh - 9em);
  /* 新增flex属性，实现整体垂直居中 */
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 把原来的table和row改成flex容器 */
.slider-container .table {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: center;
  /* 用gap直接设置图片间的固定间距，替代padding-cell */
  gap: 1.5em;
}

.slider-container .table .row {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: center;
}

.slider-container .table .row .cell {
  /* 让图片容器自动分配可用空间，同时限制最大宽度 */
  flex: 1;
  max-width: calc((100% - 3em) / 3);
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.slider-container .table .row .cell img {
  max-height: 100%;
  max-width: 100%;
  object-fit: contain; /* 确保图片完整显示，不拉伸变形 */
}

/* 可以删掉padding-cell的样式了，因为gap已经替代了它的作用 */
.slider-container .table .row .padding-cell {
  display: none;
}

如果你想保留padding-cell结构 #

要是不想改动HTML结构，也可以给padding-cell加上flex-shrink: 0来固定它的宽度，禁止缩放：

.slider-container .table .row .padding-cell {
  width: 1.5em;
  flex-shrink: 0; /* 关键：禁止这个单元格被拉伸或压缩 */
}

同时把.table的gap去掉，这样也能保证间距始终是1.5em。

为什么这个方案能解决问题？ #

• gap或固定宽度+flex-shrink:0：确保图片间的间距始终保持你设定的大小，不会随容器空间变化而失控。
• flex:1+max-width：让图片容器自动分配可用空间，同时限制最大宽度，保证图片在屏幕缩小时能自动缩放，不会超出容器范围。
• Flex的居中功能：用align-items: center轻松实现图片垂直居中，比table布局更简洁可靠。

这样修改后，就能达到你想要的效果：图片间始终保持固定间距，图片根据容器大小自动缩放，不会出现间距被拉伸的情况。

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