align-items: center 对多行文本无反应是因为它对齐的是子元素而非子元素内的文字；若文本未包裹在子元素中，则整个文本流作为单个子节点被居中，但视觉效果受 line-height、padding 和容器高度影响。
flex 布局里 align-items: center 为什么对多行文本没反应
因为 align-items 作用在 flex 容器的 ** 交叉轴上对齐子元素 **，不是对齐子元素内部的文字。如果文本是单个 <div> 或<p>，它确实会 垂直居中 这个块；但如果你把多行文字直接写在容器里（没有包裹子元素），那整个文本流就是容器的唯一子节点——它会被居中，但“多行”本身是否视觉居中，还取决于 line-height、padding 和容器高度是否匹配。
必须用 display: flex + align-items: center + justify-content: center 吗
不一定。垂直居中多行文本的核心是：让文本所在的块级元素在父容器中居中。常见做法有：
- 父容器设为
display: flex，子元素（比如一个<span>或<p>）不设高度，靠align-items: center居中 - 父容器设为
display: table-cell，配合vertical-align: middle（兼容旧浏览器，但语义差） - 纯 CSS 方案：父容器
display: flex+flex-direction: column+justify-content: center，再把文本放子容器里
现代项目首选 flex，但要注意：如果只用 align-items: center 而没设 height 或min-height，容器可能塌缩，导致“居中”不可见。
white-space和 text-align 会影响垂直居中效果吗
不影响 align-items 的计算逻辑，但影响最终视觉表现：
立即学习 “ 前端免费学习笔记（深入）”；
-
white-space: nowrap会让多行文本强行变成一行，破坏“多行”前提 -
text-align: center控制的是 ** 行内内容的水平对齐 **，和垂直居中无关；但如果不加，文本可能左贴边，看起来像没居中 - 如果文本里有
<br>或display: inline-block元素，它们会参与 flex 子项排列，可能意外撑高容器或错位
示例正确写法：
.container {display: flex; align-items: center; justify-content: center; height: 200px; border: 1px solid #ccc;} .container p {margin: 0; text-align: center;}移动端 iOS Safari 里 flex 垂直居中偶尔失效怎么办
老版本 iOS Safari（尤其是 12.5 及之前）对 min-height + flex + align-items 组合支持不稳定，尤其当容器高度由内容撑开时。解决方式很实际：
- 给父容器明确设
height（比如height: 100vh），避免依赖min-height - 避免在 flex 容器上同时用
padding和align-items: center，改用padding+text-align模拟居中 - 加
flex-shrink: 0到子元素，防止被压缩变形 - 必要时降级：用
position: absolute+top: 50%+transform: translateY(-50%)
真正容易被忽略的是：flex 容器的 height 必须可计算，不能全靠内容撑。一旦父级高度是 auto 且没有其他约束，align-items: center就失去参照系。
