display:grid; place-items:center
容器声明一行，物件按自身尺寸被推到中心；内容尺寸变化时仍居中，不脱流。
产品与设计 · 布局基础
居中Centering
按容器边界和物件尺寸，在 flex、grid、margin、absolute 四种居中方法里选对工具，并写清哪个轴成立。
换方法，看物件如何落到容器中心
同一个容器，同一个物件。切换 Flex、Grid、Margin、Absolute 四种居中方法，再切换物件尺寸，看物件的位置、坐标读数和形状如何真实变化。
中心 50% 50%双轴居中
Flex 双轴居中：物件中心 (50%, 50%) 与容器中心重合。对照：切到 margin，物件会跑到顶部——块级 margin:auto 只解析水平方向。
从演示能读出的四种方法
演示里的四种状态对应四种居中思路；前三种走文档流，absolute 脱流。
- Flex：display:flex + justify-content:center + align-items:center。容器控制，一维方向最常用；演示里物件中心 (50%, 50%)。
- Grid：display:grid + place-items:center。一行同时写两个轴，最简洁；同样落到 (50%, 50%)。
- Margin：margin-inline:auto。只对已知宽度的块级物件做水平居中；演示里物件中心 (50%, 14%) 落在顶部，垂直方向不成立。
- Absolute：position:absolute + inset:0 + margin:auto（需固定尺寸），或 top/left:50% + transform:translate(-50%,-50%)（不限尺寸）。脱离文档流。
什么时候用哪种
按「物件要不要留在文档流」和「尺寸知不知道」来选，不靠手感。
- 文档流内的卡片、图标、空状态：首选 flex 或 grid，容器一行声明，尺寸变化仍居中。
- 已知宽度的块级物件只要水平居中：margin-inline:auto 最直接，不必搭 flex。
- 弹窗、tooltip、角标：absolute 脱离文档流，叠加在指定参照上；固定尺寸用 inset:0 + margin:auto，未知尺寸用 transform。
- 单行文本垂直居中：容器高度固定时 line-height 等于容器高即可，不必动 flex/grid。
怎么用：从容器到中心坐标
三步把居中说清楚，不靠看起来在中间。
- 确认容器有明确边界（固定或最小高宽），没有边界就没有中心。
- 按物件是否留在文档流选方法：流内选 flex / grid，脱流选 absolute。
- 读物件中心坐标；水平垂直都到 50% 才算双轴居中，否则写出哪个轴没成立。
正反例：尺寸未知的弹窗内容
同一任务，只改居中方法一处；正例物件保持尺寸居中，反例物件被拉伸填满。
position:absolute; inset:0; margin:auto（无固定尺寸）
物件高度被拉伸填满容器，原始尺寸丢失；inset:0 + margin:auto 需要物件有固定宽高才居中。
快速自测
弹窗内容尺寸未知、要水平垂直都居中，哪种方案最稳？
继续查证
术语的技术定义和行为以这些一手或权威资料为准。
下一步学
和本知识点经常一起出现的概念。