center-flex Mixin能规避90%居中失效问题，因其固化display: flex、justify-content: center、align-items: center三属性，强制要求父容器设明确高度（如min-height: 100dvh），并避免子元素脱离Flex上下文。
直接用 center-flex Mixin，别自己拼写三行 flex 属性——它能规避 90% 的居中失效问题。
为什么必须封装成 Mixin 而不是复制粘贴 CSS？
手写 display: flex; justify-content: center; align-items: center; 看似简单，但每次都要确认父容器有没有高度、子元素是否被 position: absolute 带走、flex-direction 是否意外改成 column。Mixin 把这些检查点固化下来，还能统一加 min-height: 100dvh 防 iOS 视口跳变。
常见错误现象：align-items: center 写了但没效果，Computed 样式里值是对的，位置却没动——八成是父容器 height 为 0。
- 必须要求调用时父容器已设明确高度（如
min-height: 100dvh），Mixin 不替你补这个 - 不处理子元素
margin或padding，需使用者自行重置（比如& > * { margin: 0; }） - 不兼容 IE10 以下，但现代项目基本无需考虑；若需 fallback，得额外加
display: -ms-flexbox前缀
center-flex Mixin 的标准写法与参数设计
它只做一件事：让直接子元素在父容器内真正居中，不依赖宽高、不触发 BFC 异常、不和 float 冲突。参数为空，因为不需要传——高度由使用者控制，居中逻辑本身无变量。
立即学习“前端免费学习笔记（深入）”；
标准定义：
.center-flex() {
display: flex;
justify-content: center;
align-items: center;
}使用方式：
.login-box {
.center-flex();
min-height: 100dvh;
}- 不要给 Mixin 加高度参数（比如
.center-flex(100vh)），那会误导使用者以为“传了高度就自动生效” - 避免在 Mixin 内硬写
height: 100%，百分比高度依赖父级有明确高度，容易断链 - 如果父容器是
，记得同步设html, body { height: 100%; margin: 0; }，否则100%无效
什么时候不能用 center-flex？
当子元素是 position: absolute、float: left 或 display: inline 时，它完全失效——这些元素已退出 Flex 上下文，justify-content 和 align-items 对它们无感知。
常见错误场景：
- 模态框里用了
position: fixed的遮罩层，结果内容没居中：遮罩层本身不是 flex item，得单独处理 - 子元素写了
flex-grow: 1，占满全部空间后，align-items: center就没“剩余空间”可分配了 - 父容器用了
flex-direction: column，但忘了justify-content此时管的是垂直方向，align-items反而管水平——属性作用轴向翻转了
此时必须手动切回绝对定位方案：position: relative + top: 50% + left: 50% + transform: translate(-50%, -50%)，但这就和 center-flex 无关了。
多行文本垂直居中要另用 flex-center-text
center-flex 适合块级子元素，但对多行文本，光靠它还不够——文本行高、换行、white-space 都会影响视觉居中。必须用专门的 .flex-center-text(@height)，且强制传参。
原因很实在：没高度，flex 容器就塌陷，align-items: center 没空间可算。
- 必须传入具体高度或
auto（后者需配合min-height） - Mixin 内部要清子元素默认
margin：& > * { margin: 0; } - 禁用
white-space: nowrap，否则文本被压成单行，失去“多行”前提 - 别塞
vertical-align进去——它对 flex item 完全无效，纯属干扰
真正卡住人的，往往不是 Mixin 写错，而是调用时漏了 min-height，或者子元素悄悄被 CMS 注入了 style="float: left" ——这种隐性脱离，比语法错误更难排查。
