多行文字垂直居中不能只用align-items，因为它仅作用于flex容器的直接子元素；正确做法是将文字容器设为display: flex并设置固定高度、align-items: center，必要时加justify-content: center和white-space: normal。
多行文字垂直居中为什么不能只用align-items
因为 align-items 只对 flex 容器的直接子元素生效，而多行文字通常是一个 <div> 或 <code><p></p> 里塞了一堆文本——它本身不是 flex 子项，只是普通块级内容。直接给文字容器设 align-items: center 没效果，除非你把它变成 flex 容器且子元素是可布局的节点。
正确做法：把文字容器设为flex，再用align-items + justify-content
核心是让文字所在的元素既是 flex 容器，又具备明确高度（否则高度塌陷，居中无从谈起）。常见场景是卡片、按钮、弹窗标题等固定高区域。
- 必须给容器设
display: flex、height（或min-height）和align-items: center - 如果还想水平居中，加上
justify-content: center - 文字本身不需要额外样式，但建议加
white-space: normal确保换行正常（尤其当父容器有white-space: nowrap遗留时）
.card-title {
display: flex;
height: 80px;
align-items: center;
justify-content: center;
}
遇到换行后上下留白不均？检查line-height和padding
Flex 居中对齐的是整个行盒（line box），不是单个字符。如果文字行数变化，但容器高度固定，容易出现顶部/底部空隙不一致——这不是 align-items 失效，而是 line-height 和内边距干扰了视觉感知。
- 避免在文字容器上同时设
padding和height，优先用padding控制整体尺寸，更鲁棒 - 多行文字建议去掉显式
line-height，或设为1.2～1.5这类无单位值，防止与 flex 计算冲突 - 若需精确控制行间距，用
margin代替line-height更安全
IE11兼容性下align-items:center可能失效
IE11 对 align-items 在多行 flex 容器中的支持不稳定，尤其当子元素是纯文本（无包裹标签）时，常表现为顶部对齐。这不是 bug，是它把文本节点当作匿名 flex 项处理的方式不同。
- 最简解法：给文字包一层
<span></span>或<div>，确保它是明确的 flex 子项 <li>备选方案：降级使用 <code>display: table-cell+vertical-align: middle，但需配合display: table父容器 - 注意：IE11 不支持
min-height在 flex 容器上的垂直居中表现，务必用固定height
Flex 布局做多行文字垂直居中，关键不在“怎么写”，而在“谁来当 flex 容器”和“高度是否真正被约束”。漏掉高度定义、忽略 IE 的匿名节点行为、或者误以为
align-items 能直接作用于文本流——这三处最容易反复踩坑。
