.center-flex() 是首选 mixin，因它仅设 display: flex、justify-content: center、align-items: center，不依赖子元素宽高、不触发 bfc 异常、不与 float 冲突，比 transform: translatey(-50%) 更稳定可靠。
直接用 .center-flex() 就能覆盖 90% 的垂直居中场景，但必须配高度、清 margin、避开 inline 元素——否则看似生效，实则在不同容器里随机失效。
为什么 .center-flex() 是首选 mixin
它只做三件事：display: flex、justify-content: center、align-items: center。不依赖子元素宽高，不触发 BFC 异常，也不和 float 冲突。比 transform: translateY(-50%) 方案更稳，因为后者要求父容器 position: relative、子元素 position: absolute，稍一遗漏就导致父容器高度坍缩为 0。
- 父容器没设
height或min-height→ 子元素“居中”但看不见，因为父容器塌陷 - 子元素带默认
margin（比如p、h1）→ 居中偏移，必须显式重置& > * { margin: 0; } - 把
.center-flex()套在body或html上 → 全局排版流被破坏，导航栏、页脚可能错位
.flex-center-text() 必须带高度参数
多行文本垂直居中不能靠 vertical-align，也不能硬写 height: 100%——百分比高度会断链。正确做法是封装成带参 mixin，强制传入具体值或 auto（配合 min-height）。
PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。
- 写法示例：
.flex-center-text(120px)或.flex-center-text(auto) - 内部必须包含
& > * { margin: 0; }，否则段落、标题自带上下边距会撑开对齐线 - 禁用
white-space: nowrap，否则文本溢出不换行，align-items: center失效 - 别混用
transform和flex：两者逻辑冲突，transform会让子元素脱离文档流，flex的对齐计算就失效了
inline 元素怎么办？别硬套 flex
img、span 这类 inline 元素对 align-items 不响应。得回到传统方案，但必须控制上下文：
- 单行图标或文字：用
line-height == height最简单，比如height: 48px; line-height: 48px; - 多行或含块级子元素：改用
display: table-cell; vertical-align: middle;，注意 IE8+ 才支持 - 父容器
font-size: 0时慎用vertical-align：空白符影响基线计算，容易偏移 - 绝对不要给 inline 元素直接加
.center-flex()—— 它会被忽略，调试时根本看不出问题在哪
兼容性与性能陷阱
Flex 方案在现代浏览器里没问题，但如果你的项目还要跑在旧版 Safari（place-items: center（Grid）反而比某些 flex 属性更稳。不过真正要命的是性能反模式：
- 在滚动容器里高频调用
.center-flex()→ 触发 layout thrashing，尤其当子元素含动画时 - 用
calc()配合~""在 Less 里写动态 padding →~"(100% - 100px) / 2"被编译成无效 CSS，必须加空格且避免除零 - 多个嵌套 flex 容器叠加居中 → 浏览器计算量翻倍，低端机上出现卡顿，不如拆成单层 flex + 显式定位
最常被忽略的一点：所有方案都依赖父容器有明确高度来源。这个“高度”可以是固定值、min-height、内容撑开，甚至 viewport 单位，但绝不能是 height: auto 且无内容——此时 flex 的 align-items: center 就只是个摆设。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
