最省代码的写法是display: grid; place-items: center，仅需两行CSS，它合并了水平与垂直居中声明，无需justify-content和align-items双写，且对父容器高度来源更宽容（如100vh、min-height或内容撑开），现代浏览器全量支持，但IE不支持。
最省代码的写法是 display: grid + place-items: center，仅需两行 CSS，且无需关心父容器高度是否固定、子元素尺寸是否已知。
为什么 place-items: center 最省代码
它把水平和垂直居中压缩成一个声明，替代了 justify-content: center + align-items: center 的双行写法；也不需要像 flex 那样额外约束父容器高度（虽然仍需有高度来源，但 grid 对隐式高度更宽容）；更比 position: absolute + transform 少写 4 行（top/left/transform 和父容器的 position: relative）。
常见错误是给父容器加了 height: 100% 却没确保其祖先有明确高度——此时 grid 会塌缩，居中失效。真正需要的是：父容器至少有一个可计算的高度来源（比如 height: 100vh、内容撑开、或 min-height）。
-
place-items: center在现代浏览器（Chrome 66+、Firefox 63+、Safari 16.4+）中已全量支持，IE 完全不支持 - 若子元素是多个，该写法会让它们整体居中（而非各自居中），如需单个子项控制，改用
justify-self/align-self - 不推荐在表格单元格（
<td>）里直接套用，因为display: grid会破坏表格语义和渲染逻辑
flex 居中为什么不是最省，但常被误选
很多人以为 display: flex + align-items: center 省事，其实漏掉 justify-content: center 就只水平居中；而完整写法要三行（含 display），比 grid 多一行。更关键的是：当父容器高度靠内容撑开时，flex 的 align-items: center 可能“没地方可居中”——它只在交叉轴有富余空间时才生效，而 grid 的 place-items 在单轨网格中行为更确定。
立即学习“前端免费学习笔记（深入）”；
容易踩的坑：
- 父容器设了
margin: auto，会与flex居中冲突，尤其 Safari 下子元素偏移异常 - 子元素用了
margin: auto，在 flex 容器中会抢占主轴空间，导致水平错位 - 父容器同时写了
flex-direction: column却还指望justify-content控制垂直方向——此时它已变成主轴，align-items才管垂直
老项目兼容场景下怎么“省”得聪明
如果必须支持 IE11 或旧版 Android Browser，grid 和 flex 都不可靠，这时真正的省代码方案反而是 position: absolute + margin: auto 四向定位——它只要 4 行 CSS，且不依赖 JS 或 hack。
关键条件：
- 父容器必须有
position: relative（否则子元素相对 viewport 定位） - 子元素必须有明确宽高（否则
margin: auto在部分旧引擎中不触发居中） - 不能和
transform混用，否则旧版 Safari 可能双倍偏移
示例：
.container { position: relative; height: 300px; }
.centered { position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; width: 200px; height: 100px; }
真正最省代码的写法，取决于你愿意放弃哪部分兼容性；而最容易被忽略的点是：所有纯 CSS 居中方案都依赖父容器存在「可测量的交叉轴空间」——没有高度，就没有垂直居中的基准。这个前提，比选哪个属性更重要。
