居中
Centering
中级通用居中（Centering）是用 CSS 让元素或内容沿水平、垂直方向，对齐到某个容器的中间。它解决的是「相对哪里居中、居中什么」的问题，比如让后台空状态的图标和提示文字位于内容区中央。
你可能会说：「帮我把这个空状态放到右侧内容区正中间，不是整个浏览器窗口中间。」
读之前建议先了解
动手看看审批后台的空状态
审批后台
待我审批
全部任务
✓
暂无审批任务
参照容器 position
水平对齐 align-items
垂直对齐 justify-content
空状态占满它的参照容器，再用 flex 对齐图标和提示。这里的水平、垂直居中，都是相对于那个容器来说的。
内容区设为 position: relative，空状态就以内容区为定位参照；居中时不会把左侧导航算进去。
要点说「居中」时，我们要先确定什么？
- 1
先找准作为参照的容器
你说「页面中央」，AI 可能会按浏览器窗口来做；但后台有侧边栏时，你想要的往往是右侧内容区中央。先指出参照容器，才能判断结果有没有偏。
- 2
分清水平还是垂直居中
搜索框位于页头中间，通常说的是水平居中；空状态位于内容区正中间，则涉及两个方向。垂直居中还取决于容器有没有可用高度，否则视觉上可能看不出变化。
- 3
看清要移动的是什么
如果只是让卡片里的文字居中，可以处理文字对齐；如果要让整张卡片居中，就得处理卡片与父容器的布局关系。用 Flex 或 Grid 布局时，可以在父容器上控制子元素的对齐。
容易混淆的地方
居中不等于文字居中：文字可以在卡片内居中，但卡片仍靠左。它也不等于「居中窄栏布局」：后者是给整页内容设定宽度并放在页面中轴附近，而居中可以只针对一个按钮、一张卡片，或某个容器内的空状态。
什么时候用
适合用
- 后台内容区没有数据时，让空状态插图与说明组成的整体，在该内容区内水平、垂直居中。
- 登录页里，让有最大宽度的表单卡片在页面中水平居中，同时保持卡片内字段左对齐。
- 工具栏宽度变化时，让加载指示器始终位于工具栏中央，而不是依靠固定像素偏移。
不适合用
- 做订单明细列表时，内容需要方便逐行扫描；让字段沿统一的左侧起点排列，比把每行都居中更合适。
- 做左右分栏的编辑器时，目标是让编辑区和预览区各占空间；用 Flex 或 Grid 分配宽度，而不是让两栏整体居中。
- 做贴着屏幕边缘展开的抽屉时，目标是固定边缘位置；用定位或对应的布局约束，而不是居中。
练一练选一个答案，看看解释
一个后台页面左侧有导航栏，右侧内容区出现「暂无项目」空状态。设计稿要求这组图标和文字位于右侧内容区正中间。你会怎样向 AI Agent 描述实现方式？
让 AI 帮你做复制给 AI Agent 直接用
请把后台「暂无项目」空状态作为一个整体，在右侧内容区内水平、垂直居中，不要按整个浏览器窗口居中。请检查内容区的可用高度，并保留图标、标题和说明之间原有的间距。