最稳解法是display: flex+justify-content:center+align-items:center；父容器需有可计算高度（如min-height: 100vh），否则align-items因交叉轴无空间而失效；子元素不能脱离文档流。
直接用 display: flex + justify-content: center + align-items: center 是最稳、最直观的解法，99% 的现代项目都该优先选它。
flex 居中必须设父容器高度吗？
不一定，但没高度就容易“看不见效果”。align-items: center 依赖父容器在交叉轴（默认是垂直方向）上有可分配的空间；如果父容器 height: auto 且子元素又不撑高，它可能就塌成一条线——不是没居中，是没空间可居。
- 全屏居中推荐用
min-height: 100vh，比height: 100vh更安全（避免内容超长时溢出或 iOS Safari 的 100vh 异常） - 若父容器本身是内容流中的一环，临时加
background: #eee或border: 1px solid red能快速验证它是否真有高度 -
margin: auto在 flex 容器里对单个子元素也有效，且能同时吸收主轴和交叉轴剩余空间，是个低调但实用的替代写法
绝对定位 + transform(-50%, -50%) 的坑在哪？
这个组合看似通用，实则隐含两个硬性前提：父容器得是 position: relative（否则 top: 50% 会相对于 viewport 计算），且子元素必须有明确宽高（transform 自身不触发 layout，但偏移基准依赖尺寸）。
- 如果子元素宽高是
max-content或由内容撑开，translate(-50%, -50%)仍会生效，但视觉上可能“偏了”——因为 50% 是按渲染后尺寸算的，而渲染顺序可能导致计算时机偏差 - IE10 及以下不支持
transform，需加-ms-transform前缀；Safari 8–9 对transform在position: fixed元素上的表现也有细微差异 - 动画场景慎用：反复触发
transform不影响重排，但若配合top/left混用，可能意外触发 layout thrashing
grid 的 place-items: center 和 flex 有什么关键区别？
语法更短，语义更纯粹，但兼容性略窄。两者都能一键居中，核心差异在布局模型底层逻辑：
立即学习“前端免费学习笔记（深入）”；
-
place-items: center是justify-items: center+align-items: center的简写，只作用于 grid 容器的直接子项；flex 的align-items则受flex-direction影响（比如改成column，justify-content就管垂直了） - grid 不要求子元素显式设宽高，也不依赖父容器高度——只要网格轨道存在（比如用
grid-template-rows: 1fr），就能撑开空间并居中 - CanIUse 数据显示，
display: grid全局支持率已达 98.5%，但若项目需兼容 IE11，就得绕开（IE11 的 grid 实现是旧草案，place-items不被识别）
真正容易被忽略的是：居中行为是否随内容动态变化。比如一个 div 里文字从一行变两行，line-height 法会失效，flex 和 grid 却天然适应；而用 margin: 0 auto 水平居中再配 position: absolute 垂直居中，一旦子元素宽高变成 fit-content，就大概率崩掉。选方法前，先盯住“尺寸是否固定”和“浏览器底线在哪”这两个点。
