flex居中需父容器设display: flex、align-items: center和justify-content: center，并确保父容器有明确高度；sass mixin应仅封装居中行为，避免硬编码height，支持布尔参数控制单双向居中。
用 display: flex + align-items 和 justify-content 是最直接的解法
现代浏览器下，flex 居中几乎零成本，不用算高度、不依赖父容器固定尺寸，也不用 hack。它解决的是「内容块在父容器里真正意义上的垂直+水平居中」。
常见错误是只写 align-items: center 忘了 justify-content: center，结果只有上下居中、左右靠左；或者父容器没设 height，子元素又没内容撑开，看起来像没生效。
-
display: flex必须加在父容器上，不是子元素 - 父容器需有明确高度（
height、min-height或由内容撑开），否则align-items: center无参照 - 若子元素是行内元素（如
<span></span>），先确保它被设为display: block或inline-block，否则flex对齐可能不按预期作用
/* 父容器 */
.container {
display: flex;
align-items: center;
justify-content: center;
height: 300px;
}
<p>/<em> 子元素无需额外定位 </em>/
.child {
width: 100px;
height: 100px;
background: #007bff;
}</p>
Sass @mixin 封装时，别把 height 写死进 mixin
很多人一写 @mixin center-flex 就顺手加上 height: 100vh 或 min-height: 100vh，这会让 mixin 失去复用性——有些场景只需要局部居中，比如弹窗、卡片内部，根本不需要全屏高。
真正该封装的，只是居中行为本身；高度控制应交给调用方，更灵活也更符合职责分离。
- 只封装
display、align-items、justify-content - 避免在 mixin 里写
height、position、top等与布局上下文强耦合的属性 - 如果真要适配“全屏居中”场景，另建一个
@mixin center-fullscreen，显式区分语义
@mixin center-flex {
display: flex;
align-items: center;
justify-content: center;
}
<p>/<em> 调用时才决定高度 </em>/
.modal-body {
@include center-flex;
min-height: 200px;
}</p>
IE11 下 flex 垂直居中失效？检查 flex-direction 和 box-sizing
IE11 对 flex 的实现有坑：当父容器用了 flex-direction: column，再配合 align-items: center，有时会忽略 justify-content；另外，若子元素设置了 box-sizing: border-box 但 padding 过大，也可能导致视觉偏移。
这不是 Sass 或 mixin 的问题，而是底层渲染差异。别指望靠一层 @mixin 自动兜底 IE 兼容性。
- IE11 中优先用
flex-direction: row（默认值）+justify-content/align-items组合 - 避免在 flex 容器上同时设
flex-wrap: wrap和居中，IE11 行为不稳定 - 子元素若含
margin: auto，IE11 可能不识别，改用margin: 0 auto显式声明
用 @mixin 传参控制单向居中，比写多个 mixin 更轻量
没必要为「只垂直居中」「只水平居中」各建一个 mixin。用布尔参数就能覆盖全部组合，减少维护点，也避免命名混乱（比如 center-v / center-h / center-both）。
参数名要直白，比如 $vertical: true、$horizontal: true，而不是用数字或字符串枚举。
- 默认全开，调用时按需关掉某一项，语义清晰
- 参数顺序保持一致：先 vertical，后 horizontal，符合 CSS 属性习惯（
align-items在前，justify-content在后） - 注意 Sass 中
if判断要写完整，@if $vertical比@if $vertical == true更安全（避免 null 或 undefined）
@mixin center-flex($vertical: true, $horizontal: true) {
display: flex;
@if $vertical { align-items: center; }
@if $horizontal { justify-content: center; }
}
<p>/<em> 调用示例 </em>/
.sidebar-item {
@include center-flex($vertical: false); /<em> 只水平居中 </em>/
}</p>
实际项目里，最常被忽略的是父容器的高度来源——它往往来自 JS 动态计算、媒体查询断点，或外部框架（如 Vue 的 v-if 切换后 DOM 未重绘）。这时候光靠 @mixin 解决不了，得结合具体上下文看渲染时机和盒模型状态。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
