align-items: center 对多行文本无效，主因是容器未设高度或文本非Flex容器的直接子元素；需确保容器有height且目标元素为直接子项。
为什么 align-items: center 对多行文本没反应？
直接给容器设 display: flex 和 align-items: center，但文本还是贴顶——大概率是容器没设高度，或者文本父元素不是 Flex 容器本身。Flex 的 align-items 作用于**直接子元素**，如果文本被包在 <p></p> 或 <span></span> 里，而你只对外层 div 设了 Flex，那居中的是那个 <p></p> 块，不是文字内容本身。
常见错误场景：<div class="box"><p>多行文字</p></div>，只给 .box 设 Flex，却不控制 p 的内部对齐。
- 确保目标文本元素是 Flex 容器的**直接子元素**（比如把
<p></p>换成<div>，或直接让文本节点作为子级）<li>容器必须有明确的 <code>height或min-height，否则交叉轴（垂直方向）长度为 0，align-items无参照基准 - 避免给文本元素设
display: inline或float，这会让它脱离 Flex 子项的布局流
多行文本真正居中的最小可行写法
最简且可靠的做法：用一个块级元素包裹文本，并让它成为 Flex 容器的唯一子项，同时设好容器高度。
.container {
display: flex;
align-items: center;
justify-content: center; /* 水平也居中时加上 */
height: 200px; /* 必须指定 */
border: 1px solid #ccc;
}
<p>.content {
margin: 0; /<em> 清除默认 p 标签上下边距 </em>/
text-align: center; /<em> 可选：控制行内文本水平对齐 </em>/
}关键点：
立即学习“前端免费学习笔记（深入）”；
- 不用改
line-height，不依赖单行技巧 -
align-items: center居中的是.content这个块，而多行文本在块内自然按常规流排列，视觉上就是垂直居中 - 如果去掉
.content，直接把文本放.container里（无标签包裹），也能工作，但语义差，且换行需靠white-space控制
IE11 兼容性下 align-items 失效怎么办？
IE11 对 Flex 的 align-items 支持有 bug，尤其当子元素是 <p></p>、<h1></h1> 等原生块级标签时，常表现为顶部对齐或偏移。这不是写法错，是渲染缺陷。
绕过方案（无需 JS）：
- 把文本容器换成
<div>，并加 <code>display: block（虽然默认就是，但显式声明可触发 IE 更稳定解析） - 对容器加
flex-direction: column+justify-content: center，把“垂直居中”转为“主轴居中”，IE11 对justify-content支持更稳 - 终极保底：用
position: absolute+transform: translateY(-50%)，但需确保父容器position: relative
为什么不用 line-height 或 vertical-align？
这两个是老办法，但对多行文本基本无效：line-height 只对单行生效，设成容器高度会导致行间距爆炸；vertical-align 默认只对 inline/inline-block 元素起作用，且需要配合 line-height 或伪元素 hack，代码冗长、易破。
Flex 方案的优势在于：它不关心文本行数，也不依赖字体大小或容器比例，只要容器有高度，就能稳定居中。唯一的硬性要求就是别忘了设 height——这点最容易被忽略，一试没效果就以为 Flex 不行，其实是缺了这一行。
