直接写display: flex仍不居中，主因是父容器height为auto且无内容撑高，导致交叉轴无参考尺寸，align-items: center失效；必须设置明确高度（如height: 100vh或min-height: 100vh）才能生效。
为什么直接写 display: flex 还是不居中？
常见错误不是语法写错，而是父容器没“撑开”——height 为 auto 且子元素又没内容时，align-items: center 看起来完全没反应。
必须确保父容器有明确高度来源，比如：height: 100vh、min-height: 100vh、或被上层设了固定高；否则 Flex 垂直居中会失效（水平仍有效）。
- 别依赖
body默认高度，加html, body { height: 100%; } - 若用
min-height: 100vh，注意 iOS Safari 旧版对vh的计算偏差，可补min-height: -webkit-fill-available - 避免在
position: absolute容器里直接套 Flex 居中，除非该容器本身有宽高约束
@mixin vertical-center 怎么控制是否重置子元素 margin？
Sass Mixin 封装的核心价值之一，就是把「视觉干扰项」收口管理。比如登录框里只有一个 .form，你肯定不希望它自带上下 margin 把居中位置顶偏。
参数 $reset-margin: true 会生成 > * { margin: 0; }，但要注意：
立即学习“前端免费学习笔记（深入）”；
- 只作用于直接子元素，不影响孙子节点
- 如果子元素是
button或input，它们默认 margin 可能来自用户代理样式表（UA stylesheet），重置后更可控 - 设为
false时，Mixin 仅处理布局行为，适合卡片内文字居中等需保留内边距的场景
兼容性差的 place-items: center 能不能用？
能，但得看目标环境。2026 年多数项目已无需支持 Android WebView ≤4.4 或 Safari ≤10.1，此时 place-items: center 是比 Flex 更轻量的方案——一行代码，语义清晰，还天然支持多子元素网格对齐。
但若项目仍需兼容老安卓 WebView（比如政务类 App 内嵌页），就别用。Flex 方案在 IE10+、iOS 8+、Android 4.4+ 全覆盖，@mixin vertical-center 默认走的就是这条路径。
- 检查构建工具是否自动加了 Grid 前缀（PostCSS Autoprefixer 对
place-items支持有限，IE 不支持） - 不要混用：同一个容器别同时写
display: flex和place-items，后者会被忽略 - 真要兼顾，可用
@supports (place-items: center)做渐进增强
响应式场景下，怎么让居中不随屏幕缩放“漂移”？
最隐蔽的问题：用 transform: translate(-50%, -50%) + top: 50%; left: 50% 在视口缩放时可能轻微抖动，尤其 iOS Safari 滚动中触发 repaint 时。
Flex 和 Grid 方案无此问题，因为它们基于布局流而非像素偏移。但若必须用绝对定位（比如弹窗脱离文档流），建议：
- 父容器用
position: fixed替代absolute，避免滚动影响定位基准 - 避免在
scale()动画元素内部做居中，transform层叠易导致坐标系混乱 - 媒体查询中不要只改
height，同步调整min-height或padding-top防止 Flex 容器塌陷
真正难的从来不是写出居中代码，而是判断这个居中在 iPhone SE 屏幕上、在折叠屏展开态、在微信内置浏览器里，是否都稳如磐石——这需要实机测，而不是只信 DevTools 模拟器。
