max-width 仅限制宽度不控制位置，需配合 margin: 0 auto 实现居中；应作用于内容容器而非父级，且需确保子项尊重该限制并处理图片、字体、间距等响应式细节。
为什么只设 max-width 不会居中
因为 max-width 只限制容器“最多多宽”，不控制位置。如果父元素是 width: 100%（比如 body），子元素默认左对齐，右边空一大片——看起来还是“过宽”，只是内容没填满而已。margin: 0 auto 才是触发块级元素水平居中的必要条件，它让左右外边距均分剩余空间。
注意：margin: auto 会让上下外边距也变成 auto，可能把元素顶到视口顶部之外；必须写成 margin: 0 auto 或显式写 margin-left: auto; margin-right: auto。
max-width 加在哪一层才有效
别加在 body 或全局 div 上，应作用于实际内容容器，如 .container、.content 或 main。常见错误是给 Flex/Grid 容器设了 max-width，但子项用了 flex: 1 或 grid-column: 1 / -1，结果子项强行撑满，无视父容器限制。
- Flex 子项若要尊重
max-width，需显式设flex-shrink: 1和flex-basis: auto - Grid 中避免在
grid-template-columns混用fr和硬限宽；改用minmax(0, 1200px)控制单列最大宽度 - 确保目标元素是
display: block（默认就是），inline-block或 Flex/Grid 子项不响应margin: 0 auto
大屏下文字、图片、间距依然松散？光靠 max-width 不够
max-width 只管容器宽度，不管里面的内容密度。漏掉配套约束，大屏照样稀疏难读。
立即学习“前端免费学习笔记（深入）”；
- 所有
<img>必须加max-width: 100%和height: auto，否则会突破容器引发横向滚动条 - 中文阅读舒适行宽约 60–80ch，可直接用
max-width: 80ch替代像素值，更符合可读性逻辑 - 关键间距（如段落间隙、卡片
padding）慎用rem或em，大屏下根字体放大后容易失控；优先用px或clamp(1rem, 2vw, 1.5rem) - 背景图用
background-size: cover前，务必确认容器有明确高度（如height: 400px或aspect-ratio: 16/9），否则裁剪位置会漂移
要不要用 Flexbox 实现全向居中
如果目标是让某个模块（比如弹窗、登录框、宣传图）在视口内水平+垂直居中，且不依赖文档流位置，display: flex 是更稳妥的选择；但如果目标是整页内容居中（如文章正文、产品列表），仍应坚持 max-width + margin: 0 auto —— 它不脱离文档流、不影响 SEO、不干扰屏幕阅读器，且小屏自动收缩，更健壮。
真正卡住人的，从来不是 max-width 写不写，而是它加在哪一层、是否配合了居中、以及有没有同步处理图片缩放、字体响应、容器高宽比这些配套约束——漏掉任意一环，大屏都还会“松”。
