居中窄栏布局
Centered Column
初级通用居中窄栏布局（Centered Column）是把页面主要内容放进一个有最大宽度、在视口中水平居中的栏目。它解决大屏上文字铺得太宽、阅读视线来回移动的问题，常用于文章、帮助文档和设置页。
你可能会说：「页面在大屏上铺得太开了，我想让正文收窄并放在中间，手机上又能正常显示。」
动手看看帮助文档的正文栏
帮助中心页面
如何设置团队通知
成员加入项目或任务变更时，系统会发送团队通知。
你可以按项目选择提醒范围，避免收到无关消息。
重要更新仍会保留在消息中心，方便之后查看。
外框是页面，内框是正文。正文宽度最多到 max-width，两侧的 auto 外边距会把剩余空间平分，让它水平居中。
要点居中窄栏布局是怎么起作用的？
- 1
限制宽度的是内容容器
我们给主要内容设最大宽度，再让容器左右自动分配剩余空间。这样大屏上栏目不会无限变宽，文章段落也更容易逐行阅读。
- 2
窄屏时让栏目跟着收缩
手机屏幕可能比设定的最大宽度还窄，所以容器要能随可用空间缩小，并留出左右边距。你可以把最大宽度理解成上限，不是任何屏幕都要达到的固定宽度。
- 3
先分清哪些内容属于窄栏
一页里不一定所有东西都要一样宽。比如帮助中心的正文可以放进窄栏，顶部导航仍可横跨页面；图片或提示框是否跟随正文宽度，要看它们承担什么内容。
容易混淆的地方
它和「文字居中」不是一回事：窄栏居中说的是内容容器在页面中的位置，栏内段落仍然可以左对齐。它也不等于单页滚动布局，后者说的是内容如何沿页面组织；一个单页网站可以采用窄栏，也可以让各区块铺满屏幕。
什么时候用
适合用
- 做帮助文档或博客文章时，正文以连续阅读为主，用窄栏让大屏上的段落保持适中的行宽。
- 做账号设置页时，表单字段按单列排列，居中窄栏能让用户沿着清晰的路径逐项填写。
- 做 AI 工具的结果说明页时，输出以文字为主，窄栏能避免回答在宽屏上横向拉得过长。
不适合用
- 做数据分析后台时，如果用户需要同时比较多列图表和指标，优先考虑网格或侧栏布局，而不是把全页压进窄栏。
- 做图片作品集时，如果重点是同时浏览多张作品，卡片网格更适合展示缩略图和作品之间的关系。
- 做代码差异对比页时，如果要并排查看修改前后两份内容，分屏布局比单个窄栏更能保留对照关系。
练一练选一个答案，看看解释
你在做一页 AI 工具的使用说明。电脑上正文铺满屏幕，手机上宽度基本合适。你会怎样调整？
让 AI 帮你做复制给 AI Agent 直接用
请把这页使用说明的正文改成居中窄栏布局：限制正文容器的最大宽度，在宽屏上水平居中，在窄屏上随视口收缩并保留左右边距。顶部导航维持现有宽度，段落文字继续左对齐。