如何用Flexbox实现容器居中，子元素尺寸不变且左右边距随屏幕收缩

嘿，我懂你想要的效果——就像Spotify官网"What’s on Spotify?"模块那样，内容有固定的最大宽度，当屏幕缩小的时候左右边距自动收缩，不会让内容贴死屏幕边缘对吧？用Flexbox来实现这个需求非常合适，我帮你调整了代码，直接看下面：

修改后的代码 #

CSS #

#about {
  width: 100%; /* 让容器占满整个视口宽度 */
  height: 500px; /* 保留你需要的固定高度 */
  display: flex;
  justify-content: center; /* 核心：让内容水平居中 */
  padding: 0 2rem; /* 设置最小左右边距，避免屏幕极小时内容贴边 */
  box-sizing: border-box; /* 确保padding不会额外撑大容器宽度 */
}

.aboutContent {
  max-width: 1250px; /* 固定内容的最大宽度，就是你想要的尺寸 */
  width: 100%; /* 屏幕小于1250px时，自动填满父容器的可用宽度 */
  height: 100%; /* 继承父容器的高度 */
  background-color: red;
}

HTML #

<div id="about">
  <div class="aboutContent"></div>
</div>

关键逻辑解释 #

• 父容器#about：去掉了固定的width: 1920px，换成width: 100%让它适配所有屏幕宽度；justify-content: center保证内容始终在屏幕中间；padding: 0 2rem是屏幕缩小时的最小边距，你可以根据需求调整这个数值；box-sizing: border-box是为了防止padding让容器超出视口。
• .aboutContent：用max-width: 1250px限制内容的最大宽度，当屏幕宽度大于1250px时，内容保持这个固定尺寸；当屏幕宽度小于1250px时，width: 100%会让内容自动收缩，同时父容器的padding会作为左右边距，完美实现你要的Spotify式效果。

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