居中窄栏布局Centered Column
你可能会说
内容别铺满全屏，中间窄窄一条、两边留白，像博客那样。
居中窄栏布局是一种限制内容栏宽度并将其置于页面中央的页面结构文章阅读、登录和设置页面可用居中栏减少视线横向移动，让主任务更集中。具体宽度要根据中文或英文、字号和设备测试；需要品牌说明、帮助入口或多步流程时，可以保留这些必要上下文，不能把所有页面机械压成窄栏。
组成结构 · Anatomy
登录卡片
两侧空白，帮注意力聚焦到中间
居中限宽 600~720px，一行 60~75 字符
文章、表单或一张登录卡片
常见变体 · Variants
阅读栏Reading
长文阅读，一行 60~75 字符
登录卡片Auth Card
登录、注册、找回密码
表单栏Form
设置页、单列表单
典型使用场景
博客文章页
为什么我把博客迁到了静态站
阿梨 · 3 天前 · 6 分钟读完
登录注册
登录
注册
忘记密码？
设置表单
个人资料
昵称
每周精选邮件
订阅确认页
✓
订阅成功！
每周五早 8 点，《前端周刊》准时送达 you@example.com
延伸阅读 · 权威出处