max-width不生效主因是父容器无宽度、子元素display不支持或width覆盖；居中需配合margin:0 auto；替换元素须加height:auto；响应式优先用max-width:100%而非100vw。
直接给容器设 max-width 并配合 margin: 0 auto 就能生效，但多数人卡在父容器没宽度、子元素 display 类型不支持，或被 width 覆盖。
为什么 max-width 不生效？先查这三处
浏览器里明明写了 max-width: 1200px，元素却还是撑满全屏——大概率是下面某个环节出了问题：
- 父容器没设
width或display: block，比如它本身是display: inline或未定义宽度的div - 子元素用了
display: inline、display: table这类不响应max-width的显示模式 - 同时写了
width: 100%或具体像素值（如width: 1440px），width会强制覆盖max-width的约束逻辑
用开发者工具看 computed 样式，确认 width 实际解析值是否大于 max-width，比猜更准。
怎么写才真正居中且响应？
单独一个 max-width 不会自动居中，必须搭配 margin: 0 auto 和合适的 width 值：
立即学习“前端免费学习笔记（深入）”；
-
width: 100%+max-width: 1200px+margin: 0 auto：小屏占满，大屏锁死在 1200px 居中 - 别写
width: 1200px—— 小屏会横向滚动 - 如果父容器是 flex 或 grid 容器，子元素需额外加
min-width: 0或flex-shrink: 0，否则弹性收缩可能绕过max-width
图片和替换元素怎么处理？
img、video 等替换元素对 max-width 天然友好，但必须配 height: auto 才能保持宽高比：
-
img { max-width: 100%; height: auto; }是响应式图片基础写法 - 别只写
max-width: 100%而漏掉height: auto，否则高度可能塌陷或拉伸变形 - 若图片在 flex 容器里，同样要加
min-width: 0，否则默认min-width: auto会让它撑开容器
响应式断点和单位怎么选？
@media (max-width: 768px) 里的 768px 指视口宽度，不是元素宽度；单位选错会导致缩放异常：
-
max-width: 100vw看似全宽，但会包含滚动条宽度，实际可能溢出视口 —— 改用max-width: 100%更稳 - 固定断点（如
1200px）适合内容区，字符单位（如85ch）更适合正文行宽控制 - 想让背景铺满但内容居中？别给内容容器设
max-width，改用父容器padding-left: calc(50vw - 630px)模拟边界，避免布局错位
真正难的不是写 max-width，而是它和 width、display、flex 行为之间的隐性冲突，调试时得一层层看 computed 样式，而不是只盯自己写的那行 CSS。
