flexbox是目前最可靠、最简洁的水平垂直居中方案，仅需三行css：display: flex、justify-content: center、align-items: center；transform方案兼容性更好但需配合absolute定位，适用于ie9+及特殊布局场景。
Flexbox 是目前最可靠、最简洁的水平垂直居中方案；transform: translate(-50%, -50%) 是兼容性更好但需额外定位配合的备选。二者不是“二选一”，而是按项目环境和浏览器支持范围决定主次。
用 display: flex 实现居中，为什么三行 CSS 就够了
核心在于父容器控制子元素的排列逻辑，不依赖子元素尺寸或内容类型：
-
display: flex启用弹性布局，让子元素脱离常规文档流但保留语义结构 -
justify-content: center控制主轴（默认为水平）对齐，把子元素推到中间 -
align-items: center控制交叉轴（默认为垂直）对齐，完成垂直居中
常见错误现象：align-items 不生效，大概率是父容器没设高度（比如 height: 100vh 或固定值），导致交叉轴长度为 0；另外，若子元素本身是 float 或 position: absolute，会脱离 flex 上下文，也失效。
用 position: absolute + transform 居中，top: 50% 和 translate(-50%, -50%) 各管什么
top: 50% 和 left: 50% 把子元素左上角移到父容器中心点；transform: translate(-50%, -50%) 再把它向左、向上各自偏移自身宽高的 50%，从而实现整体居中。
- 必须给父容器加
position: relative，否则absolute会往上找最近的已定位祖先，可能错位 -
transform的百分比是相对于元素自身尺寸计算的，不是父容器——这点和top/left本质不同 - IE9+ 支持，但 IE9 需加前缀：
-ms-transform: translate(-50%, -50%)
容易踩的坑：漏写 position: absolute，或只写 transform 不配 top/left，结果元素还在原位置不动。
什么时候不能只靠 Flexbox，得 fallback 到 Transform
主要出现在两类场景：
- 需要支持 IE9–IE10 且无法用 Autoprefixer 自动补全前缀时（
-ms-flex兼容性不稳定） - 父容器本身是
display: grid或display: table，再嵌套flex可能引发布局冲突，此时用绝对定位更可控
注意：transform 方案要求父容器有明确的定位上下文（即至少有一个已定位祖先），而 Flexbox 对父容器的定位属性无依赖。
别忽略的细节：文字居中和块级居中不是一回事
如果只是居中文本，text-align: center + line-height 等于容器高度就足够；但一旦混入 img、button 或多行 div，就必须升级到 Flexbox 或 Transform 方案。
最常被忽略的一点：Flexbox 的 align-items: center 对单行文本有效，但对多行文本块（比如 div 包着几段 p）也有效；而 line-height 方案在多行时直接失效——因为行高只作用于每行内部，不控制块整体位置。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
