用 Sass Mixin 封装垂直居中比手写 CSS 更安全可靠，因其可统一处理高度设置、子元素 margin 重置及旧版浏览器回退，避免漏写 height、父容器无高或 inline 元素塌陷等常见错误。
用 flex 实现垂直居中时，为什么直接写 CSS 不如用 Sass Mixin？
因为重复写 display: flex、justify-content: center、align-items: center 容易漏掉 height: 100% 或父容器未设高度，导致失效。Sass Mixin 能把这一组强耦合声明封装成可复用、带语义的调用，同时支持参数控制行为（比如只居中不拉伸子元素）。
常见错误现象：align-items: center 没生效，实际是父容器没设 height 或 min-height；或者子元素是 inline 级别，被 flex 自动转为 flex-item 后宽高塌陷。
- 必须确保父容器有明确高度（
height: 100vh、min-height: 100vh或由内容撑开） - 避免对已设
float或position: absolute的元素再套flex居中——它们已脱离文档流 - 如果只需垂直居中、水平保持左对齐，用
align-items: center+justify-content: flex-start
如何写一个安全、可配置的 vertical-center Mixin？
不能只塞三行声明。要处理：是否强制全屏高度、是否重置子元素 margin、是否兼容老版 Safari 的 -webkit-box 回退（仅当项目还需支持 iOS 9 以下）。
@mixin vertical-center($full-height: true, $reset-margin: true) {
@if $full-height {
min-height: 100vh;
}
display: flex;
justify-content: center;
align-items: center;
@if $reset-margin {
> * {
margin: 0;
}
}
}使用场景举例：登录框需绝对垂直居中且不随内容变高 → @include vertical-center(true, true)；卡片内文字垂直居中但卡片本身高度由内容决定 → @include vertical-center(false, false)。
立即学习“前端免费学习笔记（深入）”；
为什么不用 place-items: center 替代？
虽然 place-items: center 更简洁，但它依赖 display: grid，而 Grid 在低版本 Android WebView（≤4.4）和旧版 Safari（≤10.1）中支持不稳。Mixin 封装的是 flex 方案，兼容性更广（IE10+、iOS 8+、Android 4.4+ 均可用）。
性能影响很小，但要注意：频繁嵌套多层 flex 容器可能让调试变得困难，建议只在真正需要居中的容器上应用该 Mixin，而非全局 body。
- 不要在
html或body上直接@include vertical-center—— 会干扰页面滚动逻辑 - 若子元素是
img，记得加max-width: 100%防止溢出 - 服务端渲染（SSR）项目中，确保
100vh不因地址栏缩放导致布局跳动，可改用100dvh（但需检查目标浏览器支持）
编译后 CSS 体积和维护成本怎么控制？
Mixin 不会重复生成样式块，Sass 编译时按调用位置展开，所以最终 CSS 里每处居中都是独立声明，没有冗余。但如果你在多个文件里都定义了同名 Mixin，会造成覆盖或冲突。
- 把 Mixin 统一放在
_mixins.scss中，并用@use "mixins"显式导入，避免@import的全局污染 - 命名带作用域，比如
layout-vertical-center，防止和第三方库（如 Bootstrap 的center-block）冲突 - 如果项目已用 Tailwind，不建议再封装此类 Mixin —— 直接用
flex items-center justify-center min-h-screen更轻量，且原子类天然防误用
最常被忽略的一点：居中后子元素的 vertical-align 和 line-height 依然生效，但已被 flex 忽略。别在 Flex 容器里还写这些属性，纯属无效代码。
