产品与设计 · 布局基础
居中Centering
居中不是猜偏移：先确定容器，再让它分配横、纵轴的剩余空间。
修复一张没居中的空状态卡
不是把元素“推到看起来差不多”。让画布分配剩余空间，并看卡片本身是否碰到两条中心线。
画布 / 480 × 260任务：让“还没有项目”同时对齐两条中心线
先做一个判断：空状态离两条虚线都远，尚未居中。可以先验证只写 margin 会少哪一轴。
刚才面板已经证明了什么
结果写在空状态卡上，而不是藏在一段提示里。
- 中心需要参照物：先有明确大小的容器，才有横、纵轴各 50%。
- 双轴是两件事：面板里 margin 后只到横轴；Flex 同时分配主轴与交叉轴余量。
- 优先让容器负责：
display:flex; justify-content:center; align-items:center，物件尺寸变了仍在中心。 - 只需水平时再用 margin：固定/受限宽的普通块可用
margin-inline:auto，别把它当双轴方案。
什么时候用，怎么用
看到空状态、加载占位或固定高度的画布需要稳定落点时，用容器居中；正文自然向下排版时不要强行垂直居中。
- 给画布或区块一个可解释的高度/最小高度。
- 物件要留在文档流里，选 Flex；二维网格容器也可用
place-items:center。 - 先读横轴和纵轴是否都到 50%，再验窄屏中卡片不会超过容器。
同一目标的正反例
目标不变：让会变高的空状态卡双轴居中。
内容从一行变三行，卡片仍由容器推到两条中心线交点。
它只解决水平；卡片仍贴着顶部，用户视觉上会误以为画布没有完成。
快速自测
一个高度固定的空状态区，内容可能变高，且要横纵都居中，先选哪种？
继续查证
术语的技术定义和行为以这些一手或权威资料为准。
下一步学
和本知识点经常一起出现的概念。