多行文本垂直居中必须明确容器高度，flex的align-items: center在无显式height时失效；vertical-center mixin通过$set-min-height和$reset-children-margin参数适配SSR、iOS及组件嵌套场景，兼顾兼容性与可维护性。
多行文本垂直居中不能靠 vertical-align 或单层 flex 一劳永逸解决——它必须分清「容器是否有固定高度」「是否允许换行」「是否要兼顾 IE 或 SSR 场景」。直接套用 display: flex; align-items: center 在父容器高度不明确时会失效，而硬加 min-height: 100vh 又会在 iOS Safari 地址栏切换时跳动。
什么时候该用 vertical-center mixin 而不是 text-align: center
text-align: center 只控制**行内内容的水平对齐**，对多行块级元素（如 p、div）的**垂直位置毫无影响**。真正需要的是让整个元素在父容器中垂直居中，且能容纳多行文本、图标、按钮等混合子节点。
- ✅ 适用场景：登录页标题区、卡片内多行说明文字、弹窗正文段落、仪表盘指标描述
- ❌ 不适用场景：纯单行文本标签（用
line-height = height更轻量）、已用position: absolute定位的元素、父容器本身由内容撑开且不允许设最小高度 - ⚠️ 注意：
vertical-center默认会对所有直接子元素重置margin，若子元素是.card这类带语义的组件，建议传参关闭自动重置：@include vertical-center(true, false)
vertical-center mixin 的参数设计与取舍
这个 mixin 不是“一键居中黑盒”，它的每个参数都对应一个真实布局约束：
-
$set-min-height: true：决定是否添加min-height: 100dvh。SSR 项目或现代 Safari 推荐设为true；若父容器是section且高度由内容决定，必须设为false -
$reset-children-margin: true：是否给> *加margin: 0。仅当子元素全是原生标签（h2、p）且无嵌套组件时安全；否则手动加.content p { margin: 0; } - 不支持
justify-content水平方向开关——因为多行居中天然要求水平也居中；如需左对齐，请改用display: grid; place-items: center start;并单独封装
为什么不用 display: grid; place-items: center 替代
看起来更简洁，但 place-items: center 在 Safari ≤15.6 和部分 Android WebView 中存在渲染错位，尤其当容器内含 backdrop-filter 或滚动容器时。更关键的是：grid 对父容器尺寸依赖更强，一旦父容器未显式设高（比如只靠 flex: 1），place-items 就会退化为左上角对齐。
- ✅ 真实可用组合：
display: flex; flex-direction: column; justify-content: center; align-items: center;—— 兼容性好，行为可预测 - ❌ 避免写法：
display: grid; grid-template-columns: 1fr; grid-template-rows: 1fr; place-items: center;—— 多余声明，且在 iOS 上易塌陷 - ⚠️ 若必须用 Grid（如需响应式行数控制），请确保父容器有明确高度来源（
height: 100dvh或flex: 1），并测试软键盘弹出后是否仍居中
如何适配 SSR 和移动端软键盘场景
服务端渲染时，100vh 在 iOS Safari 中会按初始视口计算，地址栏收起后页面被拉长；而 100dvh 是动态值，但旧版 Safari 不支持。折中方案是：
- 优先使用
100dvh，并在 JS 层 fallback 到100vh+ resize 监听修正 - SCSS 中不要写死单位，而是通过变量注入：
min-height: var(--vh, 100dvh);，再由 JS 动态设置 CSS 变量 - 避免在
vertical-center内部做 JS 检测——mixin 只负责样式输出，环境适配交给运行时逻辑 - 软键盘弹出时，
visualViewport.height会变小，此时仅靠 CSS 无法响应；必须配合resize事件重设容器高度
最易被忽略的一点：多行居中模板的复用性，不在于它能“塞进多少种容器”，而在于它是否允许调用者**安全地覆盖某一层行为而不破坏整体**——比如关掉 min-height 却保留 flex 布局，或禁用 margin 重置却维持对齐逻辑。参数化不是为了炫技，是为后续维护留出呼吸空间。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
