<p>vertical-align 对 flex 子项无效，应使用 align-items（容器）或 align-self（子项）控制交叉轴对齐；align-items: center 失效常因父容器无高度、子元素有 margin/padding 或 display 不匹配；flex-direction: column 时 align-items 控制水平对齐；baseline 需子元素为 inline-block；IE10–11 需加 -ms- 前缀。</p>
子元素在 flex 容器中 vertical-align 不生效？别用 table 那套思维
vertical-align 对 flex 子项完全无效——它只作用于 display: inline 或 table-cell 元素。Flex 布局下必须用 align-items（容器属性）或 align-self（单个子项覆盖）来控制交叉轴对齐。
-
align-items是容器级设置，影响所有直接子元素 - 如果某个子元素需要单独对齐，给它加
align-self: flex-start等值即可覆盖容器设定 - 注意：只有当容器
display是flex或inline-flex，且主轴是水平（默认flex-direction: row）时，align-items才控制“垂直”对齐
align-items: center 为什么看起来没居中？检查这些常见干扰项
居中失效往往不是 align-items 本身的问题，而是被其他样式抵消了：
- 父容器没有明确高度（比如
height: auto），导致“居中”失去参照基准；加min-height或固定height再试 - 子元素自身有
margin、padding或border，视觉上偏移；可用浏览器开发者工具的盒模型视图确认 - 子元素是
img且未设vertical-align: top/middle/bottom，它默认按基线对齐，会和文字产生空隙；此时加align-items: center能解决，但更彻底的是给img加display: block - 容器设置了
flex-direction: column，这时align-items控制的是“水平”对齐，别误以为它失效了
多个子元素内容高度不一致，想让文字基线对齐怎么办？
align-items: baseline 是专门为此设计的，但它只对“第一行文字”的基线起作用，且要求子元素是块级或内联块：
- 所有参与对齐的子元素需设
display: inline-block或保持为内联元素（如span） - 如果子元素是
div，默认display: block，baseline会退化为flex-start；必须显式改成inline-block - 不要混用
align-items: baseline和align-items: center，后者会强制按容器中心算，忽略文字基线
.container {
display: flex;
align-items: baseline;
}
.container > * {
display: inline-block; /* 关键：否则 baseline 不生效 */
}兼容性差的旧项目里 flex 不支持？fallback 方案怎么写
IE10–11 对 flex 支持不完整（比如不支持 align-items: stretch 的某些行为），真要兼容得加前缀并限制用法：
立即学习“前端免费学习笔记（深入）”；
- 使用
display: -ms-flexbox并配-ms-flex-align: center（IE10/11） - 避免在 IE 中用
align-items: baseline，它基本不可靠 - 更稳妥的降级是用
display: table-cell+vertical-align: middle，但仅限单层结构，且不能和 flex 混用
.container {
display: -ms-flexbox;
-ms-flex-align: center;
display: flex;
align-items: center;
}flex 的垂直对齐逻辑其实很干净，问题多出在容器尺寸没约束、子元素 display 类型不匹配、或者误把 inline 元素当块元素处理。对齐不准时，先打开开发者工具看盒模型，再查 display 和 align-items 是否真正生效。
