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 值：

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

• 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。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！