flex居中需同时设置justify-content和align-items，因前者控制主轴（默认水平）、后者控制交叉轴（默认垂直），单设只能单向居中；父容器必须设display: flex且有明确高度。
flex布局里justify-content和align-items为什么都得设
因为这两个属性管的是不同方向： justify-content 控制主轴（默认是水平），align-items 控制交叉轴（默认是垂直）。只设一个，顶多单向居中；双居中必须两个一起上。
常见错误现象：
- 只写
justify-content: center，元素水平居中了但还在顶部 - 父容器没设
display: flex，两个属性完全不生效 - 父容器高度为
auto，子元素撑不开，看着像没垂直居中
实操建议：
- 父容器必须设
display: flex - 确保父容器有明确高度（比如
height: 100vh或固定值），否则align-items: center在“内容高度不足”时可能表现异常 - 不需要额外写
flex-direction: row，默认就是它，主轴自然水平
.container {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
用flex居中时，子元素margin:auto为什么有时也行
因为 margin: auto 在 flex 容器的子项上，会同时在主轴和交叉轴上生效——但这只是“碰巧能用”，不是它的本意，而且依赖 flex 的默认行为。
立即学习“前端免费学习笔记（深入）”；
使用场景：
- 只想居中单个子元素，且不想动父容器的
justify-content/align-items - 父容器已设
display: flex，但其他子元素需要不同对齐方式，单独控制更灵活
容易踩的坑：
-
margin: auto在非 flex/绝对定位容器里无效 - 如果子元素是
flex项且设置了flex-grow或flex-shrink，margin: auto可能被忽略或行为异常 - IE10–11 对
margin: auto在交叉轴的支持不一致，align-items更稳
justify-content: center + align-items: center 在哪些浏览器里不安全
主要卡在旧版 IE 上：justify-content 和 align-items 在 IE10–11 中需要加 -ms- 前缀，且部分值不支持（比如 center 在 IE10 的 align-items 中无效）。
兼容性影响：
- IE10 需要写
-ms-justify-content: center和-ms-align-items: center - IE9 及以下：彻底不支持 flex，得换
position: absolute+transform或 table-cell 方案 - 移动端基本无压力，Android 4.4+、iOS 8+ 都原生支持
性能影响很小，但注意别在深层嵌套的列表项里滥用 flex 居中——每层都触发 flex 计算，滚动卡顿风险略升。
为什么不用text-align + line-height居中文字
因为那方案只适用于**单行纯文本**，一旦换行、有内联块、或者内容高度动态变化，line-height 就失灵了。
典型错误现象：
- 文字两行后直接堆在顶部，
line-height: 200px白设 - 里面混了
<img alt="CSS如何快速实现水平垂直双居中_通过justify-content与align-items配合" >或<button></button>，它们不受line-height影响 - 父容器
font-size改变，line-height值就得重调，维护成本高
实操建议：
- 纯文字单行 →
text-align: center+line-height确实快，但别当通用解法 - 只要内容可能换行、含块级元素、或需响应式适配，直接上 flex
- 别为了“少写两行 CSS”把结构逻辑绑死在字体度量上
真正麻烦的不是怎么写，是判断该不该用——很多所谓“居中失败”，其实是父容器没高度、没设 flex、或用了 inline 元素却指望它撑开空间。这些地方比属性本身更容易漏掉。
