max-width必须配margin: 0 auto才能居中，因max-width仅限制最大宽度而不控制位置；仅设max-width时内容左对齐、右侧留白，而margin: 0 auto触发浏览器水平居中逻辑，且避免margin: auto引发的垂直偏移。
max-width 为什么必须配 margin: 0 auto
只写 max-width: 1200px，内容会左对齐，右侧大片留白——因为 max-width 只限制“最多多宽”，不控制位置。块级元素默认占据整行宽度（width: 100%），当视口大于 1200px 时，它就缩成 1200px 宽，但依然靠左停着。
必须加 margin: 0 auto 才能触发浏览器的水平居中逻辑。注意不是 margin: auto，后者会让上下外边距也变成 auto，可能把元素顶到页面顶部或引发意外垂直偏移。
常见踩坑点：
-
display: inline-block或 Flex/Grid 子项上直接写margin: 0 auto无效，得先确保它是块级（display: block） - 如果容器已有
padding，而你又没设box-sizing: border-box，那max-width不包含 padding，实际占用宽度 =max-width + padding-left + padding-right，可能悄悄撑宽
该加在哪个容器上才真正起作用
不是所有父元素都适合加 max-width。加错位置等于白干：比如直接加在 body 上，可能破坏全局布局流；加在 html 上更危险，会影响根字体大小和 rem 计算。
立即学习“前端免费学习笔记（深入）”；
优先级推荐如下：
- 语义化主内容区：
main、.container、#app等最外层包裹元素 - 框架项目中，覆盖默认类（如 Bootstrap 的
.container），而不是额外套一层 div - 避免给 Flex/Grid 容器的子项硬加
max-width——它们常被flex-grow或轨道定义覆盖；改用minmax(0, 1200px)控制 Grid 轨道，或给 Flex 容器本身设限
数值怎么选：1200px 还是 80ch
像素值（如 1200px）直观，但和阅读体验脱节；字符单位（80ch）按字母宽度计算，更贴合可读性原则——英文约 50–75 字符/行最舒适，中文因字宽均一，60ch–80ch 是稳妥区间。
示例对比：
main { max-width: 80ch; margin: 0 auto; padding: 0 1rem; }
优势在于：同一段文字，在 1440px 笔记本和 2560px 显示器上，行长基本一致；而 1200px 在超宽屏下显得过窄，留白突兀。
但要注意：ch 单位依赖当前字体，若页面动态切换字体（如用户系统字体替换），实际宽度会有浮动；生产环境建议搭配媒体查询做兜底。
Flex/Grid 布局里 max-width 失效怎么办
在 Flex 容器中，子项默认有 flex-shrink: 1 和 min-width: auto，但若父容器设了 min-width: 100% 或子项写了 flex: 1，max-width 就会被忽略。
解决路径分两步：
- 检查子项是否带
flex-basis: 0或flex: 1 1 0——这会让它无视自身宽度约束，强行拉伸 - 更可靠的做法：把
max-width移到 Flex 容器本身，再让子项用flex: 1 1 auto流动；Grid 同理，优先用grid-template-columns: minmax(0, 1200px)替代对子项单独设限
另一个隐蔽原因：子项内含未约束的图片或表格，它们撑开了整行。此时单靠容器 max-width 无解，必须同步处理内联元素——img { max-width: 100%; height: auto; }，table { width: 100%; table-layout: fixed; }。
