center-flex mixin 是最稳的块级元素居中方案，通过 display: flex、justify-content: center、align-items: center 实现真正居中，不依赖宽高、不触发 bfc 异常、不与 float 冲突。
用 center-flex Mixin 实现块级元素居中，别碰 margin: auto 配合 display: block
Flex 布局是目前最稳的居中方案，center-flex Mixin 就是把它固化下来。它只做一件事：让子元素在父容器里真正居中，不依赖宽高、不触发 BFC 异常、不和 float 冲突。
常见错误是写成 .box { margin: 0 auto; } —— 这只能水平居中，且要求元素有明确宽度；或者加 text-align: center 试图“骗”行内元素垂直居中，结果完全失效。
实操建议：
- Mixin 定义要包含
display: flex、justify-content: center、align-items: center三句，缺一不可 - 如果父容器已有
display（比如inline-block），直接覆盖没问题；但若父容器是表格单元格或绝对定位元素，需额外确认其height是否被撑开 - 不推荐给
body或html直接套用，容易干扰全局排版流
.center-flex() {
display: flex;
justify-content: center;
align-items: center;
}
处理 inline 元素居中时，center-inline Mixin 必须配合 line-height 或 vertical-align
Flex 对 inline 元素无效，所以不能复用 center-flex。这时候得回到传统方案，但必须控制好上下文：父容器要有明确高度，子元素不能是纯文本（否则 vertical-align 不生效）。
典型翻车现场：span 在 div 里设了 center-inline，但父 div 没设 height，结果还是贴顶对齐。
实操建议：
- 优先用
line-height == height方案，简单可靠，适合单行文本或图标 - 若需多行或复杂结构，改用
display: table-cell+vertical-align: middle，但注意 IE8+ 兼容性 - 避免在
font-size: 0的父容器里用vertical-align，空白符会干扰基线计算
.center-inline() {
line-height: 1.5;
text-align: center;
}
响应式场景下，center-responsive Mixin 要区分移动端是否禁用 flex
某些老项目还在支持 iOS 9 或 Android 4.4，它们的 Flex 实现有 bug：比如 align-items: center 在 min-height 容器里不生效，或 flex-direction: column 下居中偏移。
这时候不能一刀切关掉 Flex，而是按需降级：桌面端用 center-flex，移动端用 position: absolute + transform: translate(-50%, -50%)。
实操建议：
- 用
@supports (display: flex)判断，比 UA 检测更可靠 - 绝对定位方案必须给父容器加
position: relative，否则top: 50%会相对视口计算 - 不要在
transform: scale()的祖先节点里用translate居中，坐标系会被缩放影响
.center-responsive() {
@supports (display: flex) {
.center-flex();
}
@else {
position: relative;
& > * {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
}
}
嵌套居中时，center-flex 和 center-inline 混用会引发层叠失效
比如一个卡片组件内部用 center-flex 居中标题，标题里又有个 span 图标想用 center-inline 微调，结果图标跑偏——因为 Flex 容器的 align-items 已经接管了所有子项的垂直对齐，vertical-align 完全被忽略。
根本原因是 CSS 对齐属性有优先级层级：Flex/ Grid 的对齐指令 > 表格单元格对齐 > 行内对齐。混用等于自己制造冲突。
实操建议：
- 同一层级只用一种居中逻辑，要么全 Flex，要么全 inline 技巧
- 图标类小元素尽量走
background-image或inline-block+line-height，避开嵌套 Flex 容器 - 调试时打开浏览器开发者工具的 Layout 面板，看 computed 样式里
align-items和vertical-align哪个被标记为 “inactive”
真正麻烦的不是写不对，而是写了两套逻辑还觉得“应该能叠加”。居中这件事，越克制越稳。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
