必须为容器设置 max-width 并配合 margin: 0 auto 实现居中，否则大屏下正文行宽超120字符致阅读效率骤降；需确保元素为块级、避免误用 margin: auto 或 max-width: 100% 等常见错误。
直接给主容器设 max-width，配合 margin: 0 auto，就能解决 90% 的大屏过宽问题。这不是“可选技巧”，而是必须写的底线规则——不加它，4K 屏上文字行宽轻松突破 120 字符，人眼追踪效率断崖下跌。
为什么只写 max-width 不生效？
常见错误是只写 max-width: 1280px，结果内容贴左、右边大片空白。因为 max-width 只限制“最宽能到哪”，不负责居中。
-
margin: 0 auto是强制块级元素水平居中的必要条件，缺它等于白设 - 如果目标元素是
display: inline-block或 Flex 子项，margin: 0 auto无效，得先确保它是常规文档流中的块级元素（默认display: block） - 别写
margin: auto——它会把上下外边距也设为 auto，可能意外撑高容器
max-width 该设多少？别硬背数字
数值不是越大胆越好，得看内容类型和阅读习惯：
- 正文类（文章、文档）：
max-width: 72ch～80ch更可靠——ch单位按字符宽度计算，天然适配可读性，比像素值更鲁棒 - 通用布局容器（如
.container）：max-width: 1280px～1440px是安全区间，兼顾 2K/4K 屏且留出左右呼吸感 - 避免
max-width: 100%——它只在父容器比自身窄时才起作用，对超宽屏完全无效 - 慎用
max-width: 85vw：窗口缩放时值实时变化，容易引发布局抖动；真要用，务必搭配@media (min-width: 1200px)限定范围
Flex/Grid 容器里 max-width 失效？检查子项收缩行为
Flex 或 Grid 父容器默认会让子项“撑满可用空间”，直接无视子项的 max-width。这不是 bug，是弹性布局的默认策略。
立即学习“前端免费学习笔记（深入）”；
- 对 Flex 子项，加
min-width: 0或overflow-wrap: break-word，打破“宁可撑开也不换行”的惯性 - 对 Grid 轨道，改用
grid-template-columns: minmax(0, 1280px) 300px，把约束写进轨道定义，而不是依赖子项样式 - 图片、iframe、表格等替换元素天然不收缩，必须显式加
max-width: 100%，否则它们会强行拉宽整个容器
背景色/边框没撑满全屏？这不是 max-width 的错
容器收窄后，body 背景色或页脚阴影仍按视口渲染，导致左右露白——这是视觉断层，常被误认为 max-width 没起作用。
- 背景延伸：给
body设背景色，容器保持background: transparent；若需容器专属背景，用::before伪元素 +position: fixed模拟全宽覆盖 - 边框/分割线：别给容器加
border，改用box-shadow: inset或绝对定位横线 - 检查是否误加了
overflow-x: hidden在html或body上——它会截断固定定位的全宽装饰元素
真正容易被忽略的是：max-width 不是“自动居中开关”，也不对抗 Flex 主轴拉伸逻辑；它只在元素处于常规文档流、且宽度由内容或父容器决定时才自然生效。一旦进了 Flex/Grid 主轴分配环节，就得从轨道或子项收缩性入手，而不是反复调 max-width 数值。
