使用display: table实现多张图片横竖居中及固定间距控制

嘿，我完全懂你现在的困扰——用display: table实现单图横竖居中特别顺手，但多图并排时，因为table-cell的宽度占比逻辑，导致图片间的间距没法固定，总是跟着屏幕尺寸变，对吧？咱们来调整方案，完美解决这个问题！

问题根源分析 #

你之前的代码给.cell设置了width: 33%，同时.table设为width: 100%，这就意味着每个单元格会强制占容器宽度的1/3，哪怕图片实际宽度远小于这个值。屏幕尺寸变化时，单元格的空白区域跟着伸缩，视觉上图片间的间距就“忽大忽小”了。

解决方案思路 #

核心是让表格自适应内容宽度，而非强制占满容器，同时用固定的padding控制图片间距，再让整个表格在容器中居中：

• 把.table的宽度改为auto，并设置margin: 0 auto，这样表格只会包裹住所有图片，并且在容器里水平居中。
• 去掉.cell的固定宽度，让它自动适配图片的实际宽度。
• 给.cell设置固定的左右padding来控制图片间的间距，首尾单元格去掉外侧padding，让整体布局更协调。
• 保留vertical-align: middle确保图片在垂直方向始终居中。

修改后的完整代码 #

CSS 部分

.slider-container {
  left: 75px;
  right: 75px;
  position: fixed;
  top: 75px;
  height: calc(100vh - 150px);
  /* 让容器成为表格容器，内部表格可垂直居中 */
  display: table;
  width: calc(100% - 150px);
}

.slider-container .table {
  display: table;
  height: 100%;
  width: auto; /* 表格自适应内容宽度 */
  margin: 0 auto; /* 表格在容器中水平居中 */
}

.slider-container .table .row {
  display: table-row;
  height: 100%;
}

.slider-container .table .row .cell {
  display: table-cell;
  height: 100%;
  vertical-align: middle;
  text-align: center;
  font-size: 0; /* 消除图片间的默认空白间隙 */
  padding: 0 15px; /* 固定左右间距，相邻图片间距为30px */
}

/* 去掉首尾单元格的外侧padding，让整体布局更居中 */
.slider-container .table .row .cell:first-child {
  padding-left: 0;
}

.slider-container .table .row .cell:last-child {
  padding-right: 0;
}

.slider-container .table .row .cell img {
  max-height: 100%;
  max-width: 100%;
}

HTML 部分

<div class="slider-container">
  <div class="table">
    <div class="row">
      <div class="cell"><img src="https://cosmic-s3.imgix.net/f1ed4d70-f2db-11e7-bf63-ff4a4a43daf9-Screen%20Shot%202018-01-06%20at%2012.19.20.png"></div>
      <div class="cell"><img src="https://cosmic-s3.imgix.net/f1ed4d70-f2db-11e7-bf63-ff4a4a43daf9-Screen%20Shot%202018-01-06%20at%2012.19.20.png"></div>
      <div class="cell"><img src="https://cosmic-s3.imgix.net/f1ed4d70-f2db-11e7-bf63-ff4a4a43daf9-Screen%20Shot%202018-01-06%20at%2012.19.20.png"></div>
    </div>
  </div>
</div>

效果说明 #

• 所有图片会在容器内垂直居中，整体组合同步水平居中。
• 图片之间的间距由.cell的padding固定控制，不会随屏幕尺寸变化。
• 表格宽度自适应图片总宽度，不会出现多余的空白区域。

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