CSS使用Sass实现页面垂直居中：通过封装Mixin简化CSS

用 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 容器里还写这些属性，纯属无效代码。