如何使div宽度适配内容并居中父容器中的img_list？

问题背景 #

需要实现.img_list宽度自适应内容，且始终在.main容器中居中。当前将.main设置为display: flex + justify-content: center后，仅在100%缩放时居中，页面缩放后.img_list内的元素会左对齐，无法保持稳定居中效果。

问题原因 #

原代码中.img_list使用inline-block布局，当页面缩放导致.img_item换行时，.img_list的宽度会被拉伸至.main的可用宽度，内部元素自然左对齐；同时.main未明确设置宽度，导致flex居中的作用范围受限。

解决方案 #

调整.img_list为flex布局，确保内部元素换行后仍居中，同时明确.main的宽度范围，让居中效果在缩放时保持稳定。

修改后的完整CSS代码：

.main {
  display: flex;
  justify-content: center;
  width: 100%; /* 让main占满父容器宽度，确保居中范围正确 */
}

.img_list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center; /* 内部item换行后依然保持居中 */
  width: auto; /* 宽度自适应内容 */
}

.img_item {
  padding-top: 10px;
  margin: 0 8px; /* 可选：添加左右间距，优化排版 */
}

HTML结构无需修改，保持原有层级即可。

效果说明 #

• .main设置width:100%后，flex居中会基于整个父容器宽度生效，确保.img_list始终处于页面水平中心。
• .img_list改为flex换行布局后，无论.img_item是否因缩放换行，都会在.img_list内部保持居中，结合.main的外层居中，实现了全缩放场景下的稳定居中效果。

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