单行文本用justify-content:center和align-items:center即可居中，前提是父容器设display:flex且有明确高度（如min-height:48px），禁用line-height以免冲突。
单行文本用 justify-content + align-items 就够了
单行文本居中，核心是让按钮、div 或其他容器成为 flex 容器，并确保它有明确高度。只要父容器设 display: flex，再加 justify-content: center（水平）和 align-items: center（垂直），文字就会稳稳居中。
常见错误：忘了设高度，或者给容器加了 line-height —— 这会和 flex 冲突，导致文字上浮或下压。
- 必须显式设置容器高度，比如
height: 48px或min-height: 48px - 不要对 flex 容器设
line-height，它对多行无效，对单行反而破坏 align-items - 子元素不用包裹
span，直接写文本就行，flex 会自动处理 - 如果容器里还混着图标，
align-items: center同样生效，无需额外调整
多行文本必须靠 align-items，别试 line-height
line-height 只对单行起作用；多行时它会让行距撑开，文字整体偏上或溢出。唯一稳定方案就是让容器本身是 flex，并启用 align-items: center。
关键点在于：多行文本的“垂直居中”其实是整个文本块在容器内居中，不是每行单独居中。flex 的 align-items 正好处理这个逻辑。
立即学习“前端免费学习笔记（深入）”；
- 容器必须设
display: flex和align-items: center，justify-content: center控制水平可选 - 高度仍需明确，否则
align-items没参照系 ——min-height比height更安全，防内容撑高 - 避免给文本加
vertical-align或margin-top，这些在 flex 下失效 - 若用
flex-direction: column，justify-content: center才管垂直，此时注意主轴变了
按钮内多行文字居中要特别注意 display 类型限制
原生 <button> 是替换元素，不能直接设 display: table-cell —— 浏览器会忽略，甚至报错。所以 fallback 方案（比如兼容 IE9）不能硬改 button 的 display，得换标签。
现代项目基本不用兼容 IE9/10，但如果你真遇到，记住：必须用 <div role="button"> 替代 <button>，再套 display: table-cell + vertical-align: middle。
- IE11 支持 flex，但不支持
place-items，所以坚持用justify-content+align-items - IE10 需加
-ms-前缀，如display: -ms-flexbox - 千万别在
<button>上写display: table-cell，它不会生效，调试时也看不出原因 - 用
role="button"时，记得加tabindex="0"和键盘事件支持，否则可访问性挂掉
flex 居中失效时先查这三件事
写完 flex 居中没反应？大概率是这三个地方卡住了，比查浏览器兼容性还优先。
- 父容器有没有设
display: flex？只给子元素设没用，必须作用在直接父级 - 父容器高度是不是 0？比如父级没内容又没设
height/min-height，align-items就没空间可居中 - 子元素有没有被
float、position: absolute或display: contents干扰？flex 只管常规流内直系子项
复杂点在于：flex 居中依赖容器尺寸和渲染流，不是“写了就一定中”。尤其嵌套深、动态插入内容时，高度计算容易滞后 —— 这时候加个 min-height 或强制重排（比如 toggle class）往往比调 flex 属性更管用。
