flex容器align-items设为center未居中，主因是父容器无明确高度或子元素存在默认外边距/行高干扰；align-self优先级高于align-items但仅作用于单个子元素；flex-direction为column时align-items控制水平对齐；IE10–11需用-ms-flex-align且不支持align-self。
flex容器的align-items设为center却没居中？
常见原因是父容器没设高度，或子元素是display: block但内容本身有默认外边距/行高干扰。交叉轴（cross axis）对齐依赖容器在该轴上有明确尺寸——比如flex-direction: row时，交叉轴是垂直方向，此时height必须可计算（不能是auto且无撑开内容）。
实操建议：
- 给 flex 容器显式设置
height或min-height（如min-height: 100vh） - 检查子元素是否意外设置了
margin、line-height或vertical-align - 用浏览器开发者工具选中容器，看 computed 样式里
cross size是否为 0
align-items 和 align-self 混用时谁优先？
align-self 会覆盖 align-items，但仅对单个子元素生效。它不是“局部重写”，而是独立控制——哪怕父容器设了 align-items: flex-start，某个子项仍可设 align-self: center 实现单独居中。
注意点：
立即学习“前端免费学习笔记（深入）”；
-
align-self对display: flex的直接子元素有效，嵌套 flex 容器里的孙子元素不继承 -
align-self: auto表示回退到父容器的align-items值（默认是stretch） - 若子元素是
float或position: absolute，align-self失效
交叉轴对齐在 flex-direction: column 下的表现
此时主轴变成垂直方向，交叉轴转为水平方向，align-items 控制的是左右对齐，而非上下。容易误以为“居中”就要改 justify-content，其实错位根源常在这里。
典型场景与写法：
- 垂直布局下让按钮水平居中：
align-items: center - 想让文字在垂直容器里上下+左右都居中：需同时设
justify-content: center（主轴居中） +align-items: center（交叉轴居中） - 若子元素宽度超出容器，默认会溢出；加
align-items: flex-start可左对齐并避免横向滚动
IE10–11 对 align-items 的兼容性坑
IE10–11 支持旧版 Flexbox 语法，align-items 需要前缀 -ms-flex-align，且值名不同：center 对应 center，但 stretch 是 stretch，flex-start 是 start，flex-end 是 end。
稳妥写法示例：
display: -ms-flexbox; display: flex; -ms-flex-align: center; align-items: center;
更关键的是：IE 不支持 align-self，所有子项对齐只能靠容器级的 -ms-flex-align 统一控制。
实际项目中如果必须兼容 IE，交叉轴精细控制尽量避免依赖 align-self，也别混用 flex-wrap: wrap 和复杂对齐组合——渲染行为在 IE 下极易不一致。
