求助：使用Flexbox实现居中图片画廊布局的HTML/CSS代码方案

以下是实现视口居中图片画廊的最简代码，解决你遇到的居中失效问题：

完整代码示例 #

HTML

<body>
  <div class="image-gallery">
    <img src="image-1.jpg" alt="图片1描述">
    <img src="image-2.jpg" alt="图片2描述">
    <img src="image-3.jpg" alt="图片3描述">
    <img src="image-4.jpg" alt="图片4描述">
    <!-- 按需添加更多图片 -->
  </div>
</body>

CSS

/* 重置浏览器默认样式，避免多余间距影响布局 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* 让body占满视口高度，并用Flex实现画廊的全局居中 */
body {
  min-height: 100vh;
  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: center;     /* 垂直居中 */
  background-color: #f5f5f5; /* 可选：给背景加底色，提升视觉效果 */
}

/* 画廊容器，用Flex实现图片流式布局 */
.image-gallery {
  display: flex;
  flex-wrap: wrap; /* 空间不足时自动换行 */
  gap: 1.5rem;     /* 图片间的间距，替代margin更简洁 */
  padding: 1rem;   /* 可选：避免图片贴到视口边缘 */
  max-width: 1200px; /* 可选：限制画廊最大宽度，防止过宽 */
}

/* 图片自适应设置 */
.image-gallery img {
  max-width: 220px; /* 可选：固定图片宽度，或设为100%自适应容器 */
  height: auto;     /* 保持图片比例 */
  border-radius: 6px; /* 可选：圆角美化 */
}

关键注意点（解决你之前的失效问题） #

• 必须给父容器（body）设置min-height:100vh：这是垂直居中的核心前提，否则body只占内容高度，无法撑起视口，垂直居中会失效。
• 重置默认样式：浏览器默认的body margin会导致画廊偏移，用*选择器统一清除是新手最容易忽略的步骤。
• flex-wrap:wrap：确保图片在屏幕变小时自动换行，不会横向溢出视口。
• gap替代margin：比给每个图片加margin更简洁，避免最后一行出现多余外边距。

可选优化 #

• 给图片添加object-fit:cover（如果需要固定图片高度，避免比例不一导致布局错乱）
• 给画廊容器加justify-content:center，让换行后的图片也保持水平居中

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