推荐封装 .flex-center-text(@height) mixin，强制传高度参数，用 display: flex + align-items: center 实现多行文本垂直居中，需清子元素 margin、禁用 white-space: nowrap、避免 vertical-align 和 transform 方案。
Less里怎么封装一个可复用的多行文本垂直居中 mixin
直接封装 .flex-center-text() 最实用，它内部用 display: flex + align-items: center + justify-content: center，但必须强制要求传入高度参数——因为没高度，flex 容器就塌陷，居中根本无从谈起。
常见错误是写成无参 mixin，结果在不同容器里调用时，有的生效、有的不生效，排查半天才发现是父容器 height 或 min-height 没设。
- 必须带高度参数，比如
.flex-center-text(120px)或.flex-center-text(auto)（后者需配合min-height） - 避免在 mixin 里硬写
height: 100%：百分比高度依赖父级有明确高度，容易断链 - 子元素默认
margin必须清掉，所以 mixin 内要包含& > * { margin: 0; }或提示使用者自行处理 - 别把
vertical-align塞进 mixin：它对 flex item 完全无效，加了反而误导
为什么不用 transform 方案封装成 Less mixin
transform: translateY(-50%) 类方案在 Less 里看似能封装，但实际埋雷太多：它要求子元素脱离文档流（position: absolute），导致父容器高度坍缩为 0，后续布局全乱；而且无法响应内容行数变化——两行和五行都靠同一个 top: 50%，视觉上其实并不真居中。
更麻烦的是，这种方案在 Less 中一旦封装成通用 mixin，使用者很容易忽略「必须给父容器加 position: relative」这个前提，结果样式到处失效却找不到原因。
立即学习“前端免费学习笔记（深入）”；
- 绝对定位 + transform 只适合固定尺寸、静态内容的极少数场景（如图标旁单行 label）
- 在响应式或 CMS 输出多变内容的项目里，它会让 QA 频繁提 bug
- Less 封装后难以做兼容性 fallback（比如 IE10 下 transform 支持不全，但 flex 的
align-items是可用的）
Less 中如何安全支持 IE10+ 的 flex 居中 fallback
现代项目基本不需要为 IE9 及以下兜底，但 IE10–11 对 align-items 支持有限（尤其在 flex-direction: column 下），所以 mixin 里可以加一行 display: -ms-flexbox; 和对应旧语法，不过重点其实是清除干扰项。
真正影响兼容性的不是 flex 本身，而是默认样式。IE 下 <p> 的上下 margin 更顽固，有时 margin: 0 都压不住，得用 margin-top: 0 !important 才行——但这属于 hack，不建议写死在 mixin 里，而应在调用处显式覆盖。
- IE10+ 下优先用
display: flex+align-items: center，不要倒退到display: table-cell - 如果必须兼容老版本，用
display: -ms-flexbox替代display: flex，并配-ms-flex-align: center - 别在 mixin 里自动加
!important：它会污染后续样式维护，应由业务层按需决定 - 移动端 iOS Safari 10–12 对
min-height+ flex 的计算偶有偏差，建议统一用height而非min-height做参数
封装时最容易被忽略的两个细节
一是 white-space：如果父容器误设了 white-space: nowrap，多行文本会被压成一行，看起来像“居中失败”，其实是换行被禁用了；二是 line-height 继承：即使用了 flex，若子元素里有 <span> 且设了大 line-height，仍会导致内部行盒偏移，视觉上偏离中心。
- 在 mixin 注释里明确提醒：调用前检查父容器是否含
white-space: normal - 不推荐在 mixin 内重置
line-height（可能破坏字体排版节奏），而应建议使用者对内联元素单独控制 - 如果容器内容来自富文本编辑器，务必确保外层包裹标签（如
<p>）是直接 flex item，不能嵌套无意义的<div> - 高度参数传
auto时，必须同步在调用处设min-height，否则 Less 编译不出错，但运行时无效
