居中窄栏布局Centered Column
页面结构限制内容宽度，让阅读或单一任务更集中
居中窄栏常用于文章、登录和设置页面，两侧留白可以减少视线移动。具体宽度要根据语言、字号和设备测试；需要更多上下文时，也可以加入品牌说明或帮助入口。
内容栏居中限宽 600~720px
什么时候用
- 行宽 60~75 字符：眼球不用长途移动，见 排版 Typography↔ 一行 60~75 字符
- 大留白聚焦：两侧的空白是设计的一部分内容栏
- 登录、注册：一张窄卡片放页面正中oil-oil••••••••登录
- 长文阅读：正文限宽，配好字号行高正文 14px、行高 1.6 起，段落之间空一行，长文读起来才不累。
什么时候不用
- 宽屏正文拉满整行，一行 150 字看到串行
- 窄栏里塞仪表盘，格子挤变形 → 看数据用 左侧栏布局 Sidebar
- 登录卡片贴左对齐，右侧一大片空地登录卡片
- 把长正文也居中对齐：每行起点乱飞这是一段居中对齐的长正文，每行的起点都不一样，读两行就开始费劲。
组成结构 · Anatomy
登录卡片
1页面留白Page两侧空白，帮注意力聚焦到中间
2内容栏Column居中限宽 600~720px，一行 60~75 字符
3内容本体Content文章、表单或一张登录卡片
常见变体 · Variants
阅读栏Reading
长文阅读，一行 60~75 字符
登录卡片Auth Card
登录、注册、找回密码
表单栏Form
设置页、单列表单
典型使用场景
博客文章页
为什么我把博客迁到了静态站
阿梨 · 3 天前 · 6 分钟读完
登录注册
登录
注册
忘记密码？
设置表单
个人资料
昵称
每周精选邮件
订阅确认页
✓
订阅成功！
每周五早 8 点，《前端周刊》准时送达 you@example.com