max-width仅设宽度上限，不控制位置；需配合width: 100%使元素具备可计算宽度，再通过margin: 0 auto实现居中，同时须确保元素处于常规文档流、非浮动/非定位，并重置body { margin: 0 }以避免基准偏移。
直接给容器设 max-width 并配 margin: 0 auto，是实现“大屏不撑、小屏不滚、视觉居中”的最简可靠路径。其他方案（如 Flex/Grid 居中）在特定上下文中有效，但这里要解决的是「常规文档流中内容区的宽度约束与居中」，不是布局系统重构。
为什么只写 max-width 不居中？
max-width 只限制“最多能多宽”，不控制位置。它像一道上限红线，但不会自动把元素推到中间。
- 常见错误：只写
max-width: 1280px，结果内容贴左，右边大片空白 - 根本原因：块级元素默认
width: auto，此时margin: auto无效——必须先让它“有明确宽度” - 解法：加
width: 100%，这样在窄屏时占满，在宽屏时受max-width截断，再由margin: 0 auto居中
margin: 0 auto 为什么有时失效？
它不是万能开关，只对满足三个条件的块级元素起作用：在常规文档流中、非浮动/非绝对定位、且有可计算的宽度。
- Flex 容器里的子项：
margin: 0 auto被忽略，改用justify-content: center - 行内元素（如
<span></span>）：即使加了display: block，也得确认父容器没用text-align: center干扰（那只是居中文本，不是居中盒子） - 绝对定位元素：需配合
left: 50%和transform: translateX(-50%) - 检查 computed 样式里
margin-left/margin-right是否真为auto，还是被其他规则覆盖
响应式最大宽度怎么写更稳？
固定像素值（如 1200px）在 4K 屏上仍显局促，纯 90vw 在小屏又可能过窄。真正健壮的做法是组合单位。
- 推荐：
max-width: min(1440px, 90vw)—— 浏览器取两者中较小值，兼顾高分屏和窄视口 - 兼容性稍低但更精细：
max-width: clamp(768px, 90vw, 1440px)，注意 IE 不支持 - 别用
width: 100vw：滚动条存在时，100vw会包含滚动条宽度，导致横向溢出 - 内部图片/表格/代码块必须同步约束：
img, table, pre { max-width: 100%; }，否则容器再严也没用
最容易被忽略的一点：body 默认 margin。Chrome/Firefox 给 body 加了 8px 外边距，会导致整体偏移——务必重置 body { margin: 0; }，否则 margin: 0 auto 看似生效，实际居中基准错了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
