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就失去参照系。
