不能只用一个 @mixin 实现所有居中场景，必须按定位方式、宽高是否已知、目标浏览器拆分编写，否则会导致 css 冗余、ie11/flex 不兼容环境失效及父容器高度遗漏等问题。
直接用一个 @mixin 搞定所有居中场景？不行。真实项目里必须按定位方式、宽高是否已知、目标浏览器拆开写，否则编译出的 CSS 不仅冗余，还容易在 IE11 或 flex 不兼容环境里失效。
为什么不能只写一个 center-flex mixin？
因为 display: flex 在 IE11 中对 position: absolute 子元素完全无效，且 align-items/justify-content 在老 Safari（iOS 9 以下）需要 -webkit-box 回退；更关键的是：flex 居中依赖父容器有明确高度（height: 100vh 或 min-height），漏写就白搭。
- 直接复用
@mixin center-flex { display: flex; justify-content: center; align-items: center; }时，调用者常忘记给父容器设高，结果页面空白——mixin 不会自动补height - 若子元素是
inline级（如<span></span>），flex 会把它转为flex-item，但默认width: auto可能导致内容塌陷，需额外重置min-width - 当父容器本身用了
float或position: absolute，再套 flex 会破坏原有布局流，调试时很难溯源
center-unknown 和 center-known 怎么选？
核心判断依据是：你能否在 Sass 编译时确定元素的宽高值。不能，就用 center-unknown；能，优先用 center-known ——后者生成的 CSS 更轻量、无 transform 偏移风险。
-
@mixin center-known($w, $h)：适用于图标、按钮等固定尺寸组件，内部用position: absolute+ 四边0+margin: auto，不依赖 JS 或运行时计算 -
@mixin center-unknown：适用于图片、文字块等宽高动态的内容，必须含top: 50%+left: 50%+transform: translate(-50%, -50%) - IE11 下
transform偏移不准？别硬加margin-left: -Xpx，而是用全局变量控制：@if $legacy-support == true { margin-left: calc(#{$w} / -2); }，前提是 $w 可传入
如何避免 @include 调用时污染选择器层级？
@include 会把 mixin 内样式原样展开到当前作用域，如果在嵌套规则里调用，容易意外加深选择器权重或产生冗余层级。
- 错误写法：
.card { .content { @include center-flex; } }→ 编译后是.card .content { display: flex; ... }，但你可能只想让.content自身居中，而非它内部的子元素 - 正确做法：把 mixin 放在最内层选择器上，或提前定义好作用域，例如
.card__content { @include center-flex; } - 在 BEM 场景下，多个块共用同一套居中逻辑？用逗号合并选择器：
.section1__body, .section2__body { @include center-unknown; }，Sass 的&会自动拼出合规类名，不破坏语义
真正麻烦的不是写出能跑的 mixin，而是让接手的人一眼看懂 $w 是指元素自身宽还是父容器宽、center-unknown 是否已处理了 inline 元素的 white-space 重置——参数命名和注释比代码本身更关键。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
