如何为Flexbox容器设置特定尺寸并保持内容居中？

我想给Flexbox容器设置特定的宽度和高度，但不知道正确的实现方法。我的初始代码如下：

初始HTML代码 #

<div class="container-gallery">
  <img src="gallery/img.png" alt="">
  <img src="gallery/img1.jpg" alt="">
  <img src="gallery/img2.jpg" alt="">
  <img src="gallery/img3.jpg" alt="">
  <img src="gallery/img4.jpg" alt="">
  <img src="gallery/img5.jpg" alt="">
</div>

初始CSS代码 #

.container-gallery {
  display: flex;
  flex-wrap: wrap;
  /* width: 67.5%; */
  justify-content: center;      
}

.container-gallery img{
  width: 15%;
  height: 30vh;
  border-radius: 8%;
  margin: 1%;
}

我尝试给container-gallery添加父div来居中子元素，并为container-gallery设置特定宽度，虽然能实现固定尺寸，但缩放页面时容器内的内容无法保持居中，相关代码如下：

尝试的HTML代码 #

<div class="main-gallery">
  <div class="container-gallery">
    <img src="gallery/img.png" alt="">
    <img src="gallery/img1.jpg" alt="">
    <img src="gallery/img2.jpg" alt="">
    <img src="gallery/img3.jpg" alt="">
    <img src="gallery/img4.jpg" alt="">
    <img src="gallery/img5.jpg" alt="">
  </div>
</div>

尝试的CSS代码 #

.container-gallery {
  display: flex;
  flex-wrap: wrap;
  width: 67.5%;
}

.container-gallery img{
  width: 15%;
  height: 30vh;
  border-radius: 8%;
  margin: 1%;
}

.main-gallery {
  display: flex;
  justify-content: center;
}

我是Flexbox新手，请问该如何解决这个问题？我想要达到的效果是：固定宽度的图片容器在页面中始终居中，容器内的图片排列整齐，缩放页面时内部图片也能保持在容器内居中对齐。

问题出在你移除了.container-gallery的justify-content: center属性，导致容器内的图片无法在容器内部居中。只需要把这个属性加回去，同时保留父容器的居中设置，就能实现你要的效果。

修正后的完整代码 #

HTML代码 #

<div class="main-gallery">
  <div class="container-gallery">
    <img src="gallery/img.png" alt="">
    <img src="gallery/img1.jpg" alt="">
    <img src="gallery/img2.jpg" alt="">
    <img src="gallery/img3.jpg" alt="">
    <img src="gallery/img4.jpg" alt="">
    <img src="gallery/img5.jpg" alt="">
  </div>
</div>

CSS代码 #

/* 父容器：负责把整个图片容器居中在页面中 */
.main-gallery {
  display: flex;
  justify-content: center;
  /* 可选：如果需要垂直居中可以加 align-items: center; 并给父容器设置高度，比如 min-height: 100vh; */
}

/* 图片容器：设置固定宽度，内部用Flex布局排列图片 */
.container-gallery {
  display: flex;
  flex-wrap: wrap;
  width: 67.5%;
  justify-content: center; /* 关键：让容器内的图片在容器内部居中 */
  gap: 1%; /* 用gap替代margin更简洁，避免换行时的额外间距 */
}

.container-gallery img {
  width: 15%;
  height: 30vh;
  border-radius: 8%;
  /* 移除margin，改用容器的gap属性控制间距 */
}

关键说明 #

• 父容器.main-gallery：用display: flex + justify-content: center实现整个图片容器在页面水平居中。如果需要垂直居中，可以添加align-items: center并给父容器设置高度（比如min-height: 100vh）。
• 图片容器.container-gallery：必须保留justify-content: center，这样当页面缩放、图片换行时，每一行的图片都会在容器内部居中对齐，而不是靠左排列。
• 间距优化：用gap替代图片的margin，可以更精准地控制图片之间的间距，避免换行时容器边缘出现多余的margin。

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