居中窄栏布局Centered Column
你可能会说
内容别铺满全屏，中间窄窄一条、两边留白，像博客那样。
居中窄栏布局是一种限制内容栏宽度并将其置于页面中央的页面结构文章阅读、登录和设置页面可用居中栏减少视线横向移动，让主任务更集中。具体宽度要根据中文或英文、字号和设备测试；需要品牌说明、帮助入口或多步流程时，可以保留这些必要上下文，不能把所有页面机械压成窄栏。
你可以这样告诉 AI Agent
请把博客正文改为居中窄栏，根据中英文、字号和设备测试可读最大宽度，段落保持左对齐。两侧留白随视口变化，手机保留安全内边距；检查代码块和图片可以在需要时适度超出正文栏。
什么时候用
- 行宽 60~75 字符：眼球不用长途移动，见 排版 Typography↔ 一行 60~75 字符
- 大留白聚焦：两侧的空白是设计的一部分内容栏
- 登录、注册：一张窄卡片放页面正中ans-studio••••••••登录
- 长文阅读：正文限宽，配好字号行高正文的字号与行高要清楚易读，长文才容易持续阅读。
什么时候不用
- 宽屏正文未限宽：单行字符过多会影响阅读
- 窄栏放入仪表盘：网格空间不足，数据界面可使用 左侧栏布局 Sidebar
- 登录卡片未居中：会造成两侧留白失衡登录卡片
- 长正文使用居中对齐：每行起点不一致，阅读效率降低这是一段居中对齐的长正文，每行的起点都不一样，读两行就开始费劲。
组成结构 · Anatomy
登录卡片
两侧空白，帮注意力聚焦到中间
居中限宽 600~720px，一行 60~75 字符
文章、表单或一张登录卡片
常见变体 · Variants
阅读栏Reading
长文阅读，一行 60~75 字符
登录卡片Auth Card
登录、注册、找回密码
表单栏Form
设置页、单列表单
典型使用场景
博客文章页
为什么我把博客迁到了静态站
阿梨 · 3 天前 · 6 分钟读完
登录注册
登录
注册
忘记密码？
设置表单
个人资料
昵称
每周精选邮件
订阅确认页
✓
订阅成功！
每周五早 8 点，《前端周刊》准时送达 you@example.com
延伸阅读 · 权威出处
快速练习