如何实现网页底部图片自动换行并居中显示？

我需要在网页底部展示10张尺寸约100x200像素的小图片，要求：

• 宽屏时所有图片在一行均匀分布
• 浏览器窗口变窄时，图片自动换行，每行剩余的图片保持居中对齐

宽屏效果示意：

|                                                                                     |    
|                   The page when wide enough                                         |    
|                                                                                     |    
|                                                                                     |    
|                                                                                     |    
|   +----+  +----+  +----+  +----+  +----+  +----+  +----+  +----+  +----+  +----+    |
|   |    |  |    |  |    |  |    |  |    |  |    |  |    |  |    |  |    |  |    |    |
|   |  1 |  |  2 |  |  3 |  |  4 |  |  5 |  |  6 |  |  7 |  |  8 |  |  9 |  | 10 |    |
|   |    |  |    |  |    |  |    |  |    |  |    |  |    |  |    |  |    |  |    |    |
|   +----+  +----+  +----+  +----+  +----+  +----+  +----+  +----+  +----+  +----+    |
|                                                                                     |    
+-------------------------------------------------------------------------------------+ 

窄屏效果示意：

|                                                                                     |    
|                   The page when more narrow                                         |    
|                                                                                     |    
|                                                                                     |    
|                                                                                     |    
|                +----+  +----+  +----+  +----+  +----+  +----+                       |
|                |    |  |    |  |    |  |    |  |    |  |    |                       |
|                |  1 |  |  2 |  |  3 |  |  4 |  |  5 |  |  6 |                       |
|                |    |  |    |  |    |  |    |  |    |  |    |                       |
|                +----+  +----+  +----+  +----+  +----+  +----+                       |
|                                                                                     |    
|                        +----+  +----+  +----+  +----+                               |    
|                        |    |  |    |  |    |  |    |                               |    
|                        |  7 |  |  8 |  |  9 |  | 10 |                               |    
|                        |    |  |    |  |    |  |    |                               |    
|                        +----+  +----+  +----+  +----+                               |    
|                                                                                     |    
+-------------------------------------------------------------------------------------+  

我试过用table、div以及两者结合的方式，都没实现预期效果。页面用PHP开发，但希望通过HTML和CSS解决这个问题。

Flexbox是实现这种自适应居中换行布局最简单的方式，兼容性好且代码简洁。

HTML结构 #

<!-- 页面底部的图片容器 -->
<div class="bottom-image-container">
  <img src="image1.jpg" alt="图片1" class="bottom-image">
  <img src="image2.jpg" alt="图片2" class="bottom-image">
  <img src="image3.jpg" alt="图片3" class="bottom-image">
  <img src="image4.jpg" alt="图片4" class="bottom-image">
  <img src="image5.jpg" alt="图片5" class="bottom-image">
  <img src="image6.jpg" alt="图片6" class="bottom-image">
  <img src="image7.jpg" alt="图片7" class="bottom-image">
  <img src="image8.jpg" alt="图片8" class="bottom-image">
  <img src="image9.jpg" alt="图片9" class="bottom-image">
  <img src="image10.jpg" alt="图片10" class="bottom-image">
</div>

CSS样式 #

/* 确保页面高度足够，让容器固定在底部 */
body {
  min-height: 100vh;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* 底部图片容器 */
.bottom-image-container {
  display: flex;
  flex-wrap: wrap; /* 自动换行 */
  justify-content: center; /* 每行内容居中 */
  gap: 20px; /* 图片之间的间距，可根据需求调整 */
  padding: 20px;
  /* 固定在页面底部 */
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #fff; /* 可选，避免内容被图片遮挡 */
}

/* 图片样式 */
.bottom-image {
  width: 100px;
  height: 200px;
  object-fit: cover; /* 保持图片比例，避免拉伸 */
}

关键属性说明 #

• display: flex：将容器设置为Flex布局
• flex-wrap: wrap：当容器宽度不足以容纳所有图片时，自动换行
• justify-content: center：让每行的图片居中对齐，剩余空间均匀分布在两侧
• gap：控制图片之间的间距，比用margin更简洁，不会出现最后一行的多余间距
• position: fixed：让容器固定在页面底部，如果需要随页面滚动而移动，可改为position: absolute并确保父容器有position: relative

Grid布局替代方案 #

如果需要兼容更老的浏览器，也可以用Grid布局实现：

.bottom-image-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(100px, auto)); /* 自动适配列数 */
  justify-content: center;
  gap: 20px;
  padding: 20px;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #fff;
}

.bottom-image {
  width: 100px;
  height: 200px;
  object-fit: cover;
}

注意事项 #

• 如果页面底部有其他内容，需要给body添加padding-bottom，值等于容器的高度，避免内容被遮挡
• object-fit: cover可以确保图片按比例显示，不会变形，根据实际需求也可以用contain或其他值

内容的提问来源于stack exchange，提问作者Rudi Bjørn Rasmussen