flexbox居中比margin auto更可靠，因其对任意子元素生效且不依赖尺寸，而margin auto在非块级、非绝对定位元素上基本失效。
Flexbox居中为什么比margin auto更可靠
因为margin: auto在非块级、非绝对定位元素上基本失效，而display: flex对任意子元素都生效，且不依赖尺寸——哪怕内容是动态加载的图片或异步文本也能立刻居中。
- 绝对定位+transform需要知道宽高，否则
transform: translate(-50%, -50%)会偏移错位 - table-cell方案在Flexbox普及后已无必要，还容易和响应式断点冲突
- Flexbox的
justify-content和align-items作用于容器，子元素完全不用改样式
必须设height才能垂直居中？不一定
只有当父容器高度不确定（比如仅靠内容撑开）时，align-items: center才看起来“没反应”——其实它在起作用，只是父容器高度为0或auto，没空间可居中。
- 常见场景：父容器是
div且没设height或min-height，又没其他内容撑高 - 解法不是硬写
height: 100vh，而是检查父级是否被压缩（比如外层display: flex没设flex-direction: column） - 更稳妥的做法是给父容器加
min-height: 100vh，既保证视口内居中，又允许内容超出时自然滚动
justify-content和align-items值选错的典型表现
写成justify-content: center; align-items: flex-start会导致水平居中但顶部贴边；写反顺序或混用flex-end会让元素跑出可视区，尤其在移动端小屏上容易误判。
- 默认值是
justify-content: flex-start（左对齐）、align-items: stretch（拉伸），不是居中 - 要真正万能居中，两个属性都得是
center，缺一不可 - 如果子元素是
inline或Float布局，Flexbox会自动将其转为flex item，但vertical-align等旧属性会失效
IE11里align-items: center偶尔失效怎么办
不是bug，是IE11对min-height和flex容器高度计算有偏差，尤其当父容器含padding或border时。
立即学习“前端免费学习笔记（深入）”；
- 加
flex-shrink: 0到子元素，防止IE11错误压缩 - 避免在父容器上同时用
height和min-height，IE11会优先按height算，导致实际可用空间变小 - 最简兜底：给子元素加
margin: auto，IE11下它对flex item仍有效
Flexbox居中看似简单，但真正卡住人的往往不是语法，而是父容器的高度来源是否清晰、是否被意外重置，以及IE兼容时那些只在特定嵌套深度才冒出来的计算误差。