justify-content:flex-start搭配margin:0 auto无法居中外层div的问题

问题根源 #

1. 外层div无法居中：你给外层div设置了width:100%，这会让它完全占满父容器（通常是body）的宽度，margin:0 auto需要元素宽度小于父容器才有空间分配左右margin，因此居中效果失效。
2. Flex容器未左对齐：当前flex容器用了justify-content-between，会让每行元素两端对齐，改成justify-content:flex-start才能实现左对齐。

修正后的代码 #

<div style="margin:0 auto; max-width:1200px;">
  <div class="d-flex flex-wrap new-cards justify-content-start">
    <div class="card p-3">Lorem ipsum dolor sit amet, consectetur adipisicing elit. sum dolor sit amet, consectetur adipisicing elit. Quod aliquid, mollitia odio veniam sit iste esse assumenda amet aperiam exercitationem, ea animi blanditiis recusandae! Ratione voluptatum molestiae adipisci, beatae obcaecati.</div>
    <div class="card p-3">Lorem ipsum dolor sit amet, consectetur adipisicing elit. sum dolor sit amet, consectetur adipisicing elit. Quod aliquid, mollitia odio veniam sit iste esse assumenda amet aperiam exercitationem, ea animi blanditiis recusandae! Ratione voluptatum molestiae adipisci, beatae obcaecati.</div>
    <div class="card p-3">Lorem ipsum dolor sit amet, consectetur adipisicing elit. ipsum dolor sit amet, consectetur adipisicing elit. Quod aliquid, mollitia odio veniam sit iste esse assumenda amet aperiam exercitationem, ea animi blanditiis recusandae! Ratione voluptatum molestiae adipisci, beatae obcaecati.</div>
    <div class="card p-3">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod aliquid, mollitia odio veniam sit iste esse assumenda amet aperiam exercitationem, ea animi blanditiis recusandae! Ratione voluptatum molestiae adipisci, beatae obcaecati.</div>
    <div class="card p-3">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod aliquid, mollitia odio veniam sit iste esse assumenda amet aperiam exercitationem, ea animi blanditiis recusandae! Ratione voluptatum molestiae adipisci, beatae obcaecati.</div>
    <div class="card p-3">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod aliquid, mollitia odio veniam sit iste esse assumenda amet aperiam exercitationem, ea animi blanditiis recusandae! Ratione voluptatum molestiae adipisci, beatae obcaecati.</div>
    <div class="card p-3">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod aliquid, mollitia odio veniam sit iste esse assumenda amet aperiam exercitationem, ea animi blanditiis recusandae! Ratione voluptatum molestiae adipisci, beatae obcaecati.</div>
    <div class="card p-3">Lorem em ipsum dolor sem ipsum dolor sem ipsum dolor sipsum dolorem ipsum dolor s sit amet, consectetur adipisicing elit. Quod aliquid, mollitia odio veniam sit iste esse assumenda amet aperiam exercitationem, ea animi blanditiis recusandae! Ratione voluptatum molestiae adipisci, beatae obcaecati.</div>
  </div>
</div>

核心修改说明 #

• 外层div移除width:100%，保留max-width:1200px和margin:0 auto：页面宽度大于1200px时，外层div固定宽度并左右居中；页面宽度小于1200px时，外层div自适应宽度且保持居中。
• 将flex容器的justify-content-between替换为justify-content-start（Bootstrap类名对应CSS的justify-content:flex-start），实现每行内容左对齐。

额外排查点 #

如果仍无法居中，检查body是否有默认内边距或外边距，可添加全局样式：

body {
  margin: 0;
  padding: 0;
}

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