Flexbox居中比margin: auto更可靠，因其原生支持主轴与交叉轴对齐（justify-content和align-items），不依赖元素类型、父容器宽高是否明确，且兼容性更优、性能更好。
Flexbox居中为什么比margin: auto更可靠
因为 margin: auto 在 flex 容器里只对块级元素“偶然有效”，而 justify-content 和 align-items 是 flex 布局原生的对齐控制，不依赖元素 display 类型或父容器宽度是否明确。
- 当子元素是 inline 元素（比如
<span>）时，margin: auto完全无效；但justify-content: center照样生效 - 如果父容器没设
height，margin: auto垂直居中必然失败；而align-items: center只要父容器是display: flex就能工作 - flex 居中不触发重排（reflow），性能略优；
margin: auto在某些旧版 Safari 中有渲染抖动
justify-content:center 仅水平居中？那垂直怎么办
justify-content 管主轴（main axis），默认是水平方向；垂直居中必须配 align-items —— 它管交叉轴（cross axis）。两者得一起用，缺一不可。
- 主轴方向由
flex-direction决定：默认row→ 主轴水平 →justify-content控制左右 - 若改成
flex-direction: column，主轴变垂直，此时justify-content: center就变成垂直居中，而align-items反倒管左右 - 最稳妥写法始终是同时写：
justify-content: center; align-items: center;
遇到子元素换行或内容溢出，居中就失效了
这是因为 flex-wrap: wrap 或内容过长导致主轴尺寸超出容器，justify-content: center 仍会把“整行”居中，但视觉上像偏了。
- 检查是否误加了
flex-wrap: wrap；单个居中元素通常不需要换行，删掉它 - 子元素有固定宽高或
min-width时，可能撑开主轴；加flex-shrink: 0防止压缩，或用max-width: 100%限制 - 文字过长未换行？给子元素加
word-break: break-word或overflow-wrap: break-word
兼容性坑：IE11 对 justify-content 的支持很别扭
IE11 支持 justify-content，但不支持 space-evenly，且对 flex-direction: column 下的 justify-content 行为有偏差。更麻烦的是，它把 align-items: center 应用在了错误的轴上。
立即学习“前端免费学习笔记（深入）”；
- 只要用
justify-content: center; align-items: center;，IE11 就能正确居中 —— 别改值，别简写 - 避免用
flex: 1作为子元素样式，IE11 解析不稳定；显式写flex-grow: 1更安全 - 如果必须支持 IE11，父容器记得加
min-height: 1px，否则空 flex 容器高度塌陷
align-items 这一行，或者在调试时死盯 justify-content 却没意识到主轴方向已被 flex-direction 调转。 
