vertical-center Mixin 仅适用于父容器有明确高度且需子元素垂直居中的场景；默认设 min-height: 100vh 是为全屏容器提供高度基准，但内容撑开的容器应传 false 关闭；SSR 项目推荐用 100dvh 替代以避免 iOS Safari 地址栏切换导致的重排跳动。
vertical-center Mixin 不是万能胶，它只解决「父容器有明确高度 + 子元素需居中」这一类问题。直接套用却忽略容器状态，反而会让居中失效。
为什么 vertical-center Mixin 默认设 min-height: 100vh？
因为绝大多数垂直居中场景发生在全屏容器（如登录页、引导页），100vh 能确保父容器有可参考的高度基准。但若父容器本身由内容撑开（比如一个 div 包裹几段文字），强制加 min-height: 100vh 会导致页面拉长、滚动条异常。
此时应传入 false 关闭该行为：@include vertical-center(false, true)。Mixin 内部会跳过 min-height 声明，只保留 display: flex 相关样式，把高度控制权交还给布局逻辑。
- 服务端渲染（SSR）项目中，
100vh在 iOS Safari 地址栏收起/展开时会触发重排，造成视觉跳动；建议用100dvh替代（Chrome 102+、Safari 16.4+ 支持） - 若需兼容旧版 Safari（≤15.6），仍得回退到
100vh，但要配合 JS 监听resize手动修正 -
min-height和height效果不同：前者允许内容撑高，后者会截断溢出
vertical-center 的 $reset-margin 参数到底重置了什么？
它只对直接子元素（> *）生效，将所有子元素的 margin 设为 0。这不是为了“清样式”，而是防止子元素自带的 margin-top 或 margin-bottom 干扰 flex 居中的计算逻辑——尤其当子元素是 <p></p>、<h2></h2> 这类默认带外边距的标签时。
立即学习“前端免费学习笔记（深入）”；
但这个重置不智能：如果子元素里嵌套了另一个需要 margin 的组件（比如一个卡片组件内部有 margin-bottom: 16px），就会被意外清除。
- 安全做法是关闭自动重置：
@include vertical-center(true, false)，改用语义化类名手动控制，例如.card { margin: 0; } - 若子元素是
<img alt="如何利用SCSS实现CSS水平垂直居中的多种方案_通过Mixin参数切换" >，记得额外加max-width: 100%和height: auto，否则可能溢出容器 - 不要在已设
float或position: absolute的子元素上依赖此重置——它们已脱离文档流，margin本就不参与 flex 排列
如何用同一个 Mixin 实现「仅垂直居中，水平左对齐」？
原 Mixin 默认同时启用 justify-content: center 和 align-items: center，但实际业务中常需保留左侧对齐（比如弹窗标题、侧边导航图标）。不能靠覆盖样式硬删，而应在 Mixin 层面支持行为切换。
推荐扩展参数：$justify: center，默认保持居中，但允许传入 flex-start 或 flex-end：
@mixin vertical-center($full-height: true, $reset-margin: true, $justify: center) {
@if $full-height { min-height: 100vh; }
display: flex;
justify-content: $justify;
align-items: center;
@if $reset-margin { > * { margin: 0; } }
}- 调用示例：
@include vertical-center(true, true, flex-start)→ 垂直居中 + 水平左对齐 - 注意
$justify不支持space-between等多值语法，那是多子元素分布场景，已超出单容器居中 Mixin 的职责边界 - 若需同时控制
align-content（多行 flex 容器），说明你正在处理的是多行内容，应拆分为独立布局模块，而非塞进一个居中 Mixin
为什么不用 place-items: center 封装进 Mixin？
它写起来确实更短，但底层依赖 display: grid，而 Grid 在 Android 4.4 WebView 和 Safari ≤10.1 中存在严重兼容问题（比如 place-items 被完全忽略，或导致子元素消失）。Flex 方案（display: flex + justify-content + align-items）在 IE10+、iOS 8+、Android 4.4+ 均稳定可用。
真正容易被忽略的是调试成本：当居中失效时，Flex 的表现更可预测——你可以快速检查父容器是否有高度、子元素是否被 float 干扰；而 Grid 的隐式轨道生成机制会让开发者陷入「为什么这里没创建行轨道」的排查黑洞。
- 若项目已放弃 IE 和旧版移动浏览器，且团队熟悉 Grid，可另建
grid-centerMixin，但不要混用 - 不要在
html或body标签上应用任何居中 Mixin——这会破坏文档流和滚动行为，尤其是min-height: 100vh在移动端可能引发地址栏缩放抖动 - Mixin 是封装，不是魔法。它无法修复父容器未设
position: relative却期待绝对定位子元素居中的逻辑错误
