最稳方案是 .center-flex() mixin，需父容器有高度、子元素无默认 margin 且非 inline 元素；它仅三行 css（display: flex、justify-content: center、align-items: center），不依赖子元素尺寸，比 transform 更可靠。
直接用 .center-flex() Mixin，90% 场景下最稳，但必须确保父容器有高度、子元素无默认 margin、且不能是 inline 元素。
为什么 .center-flex() 是首选
它只写三行 CSS：display: flex、justify-content: center、align-items: center。不依赖子元素宽高，不触发 BFC 异常，也不和 float 冲突。比 transform: translateY(-50%) 更可靠——后者要求父容器 position: relative、子元素 position: absolute，漏一个就导致父容器高度塌陷为 0。
常见翻车点：
- 父容器没设
height或min-height→ 子元素“居中”但不可见 - 子元素是
<p></p>或<h1></h1>→ 自带上下 margin，必须显式重置：& > * { margin: 0; } - 把
.center-flex()直接套在body或html上 → 全局排版流被破坏，导航栏、页脚错位
.center-flex() 的正确用法
定义要严格包含三句，缺一不可：
.center-flex() {
display: flex;
justify-content: center;
align-items: center;
}
调用时注意上下文：
- 若父容器已有
display（比如inline-block），直接覆盖没问题 - 若父容器是表格单元格（
td）或绝对定位元素，需额外确认其height是否被撑开 - 别混用
transform和flex：两者逻辑冲突，transform会让子元素脱离文档流，align-items就失效了
inline 元素怎么办？别硬套 .center-flex()
img、span 这类 inline 元素对 align-items 不响应，.center-flex() 会被忽略，调试时根本看不出问题。
正确方案分两类：
- 单行图标或文字：用
line-height == height，例如height: 48px; line-height: 48px; - 多行或含块级子元素：改用
display: table-cell; vertical-align: middle;，注意 IE8+ 才支持 - 父容器
font-size: 0时慎用vertical-align：空白符干扰基线计算，容易偏移
滚动容器里高频使用 .center-flex() 的性能陷阱
Flex 居中本身没性能问题，但在滚动容器（如 overflow-y: auto）里高频调用（比如每帧都渲染大量居中卡片），会触发 layout thrashing，尤其当子元素有动态尺寸或频繁重绘时。
可选缓解方式：
- 对滚动区域加
contain: layout paint（现代浏览器） - 避免在
:hover或动画中动态切换.center-flex() - 旧版 Safari 中某些 flex 属性不稳定，可考虑降级用
place-items: center（Grid）替代
真正容易被忽略的是：居中不是目的，可访问性与语义结构才是根基。一个居中的按钮如果没设置 tabindex 或焦点样式，在键盘操作下就等于不存在。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
