flex-direction 本身不能实现多行文本垂直居中，真正起作用的是 align-items（交叉轴居中）和 justify-content（主轴居中），需配合 display: flex 容器、明确高度及清除子元素默认 margin。
flex-direction 不能直接实现多行文本垂直居中
很多人搜 flex-direction 是想让文字在容器里上下居中，但这个属性只控制主轴方向（row 或 column），它本身不处理对齐。真正起作用的是 align-items 和 justify-content —— 而且必须配合正确的 display: flex 容器和子元素结构。
正确做法：用 flex + align-items + 文本自身特性
多行文本垂直居中，核心是把文本当作 flex 子项来对待，而不是靠 line-height 或 padding 硬调。常见错误是只设 flex-direction: column 却忘了设置 align-items，或者把文字直接写在 flex 容器里没包一层 <span></span> 或 <p></p>。
-
display: flex必须加在父容器上，不是文字元素上 - 如果文本是纯文本节点（无包裹标签），flex 对齐可能失效；建议用
<p></p>或<div> 包一层<li> <code>align-items: center控制交叉轴居中（即垂直方向），前提是flex-direction: row（默认值）；若用了column，则需justify-content: center - 容器要有明确高度（比如
height: 200px），否则 flex 没参考基准
```css
.box {
display: flex;
align-items: center;
height: 120px;
border: 1px solid #ccc;
}
.box p {
margin: 0;
/* 多行文本自然换行，无需额外设置 */
}
```为什么不用 line-height 或 table-cell？
老办法如 line-height 只适用于单行；display: table-cell + vertical-align: middle 虽能撑开多行，但语义错乱、响应式差、Flexbox 已成标准方案。现代项目里硬套 table 布局容易引发嵌套复杂度和维护成本。
-
line-height设为容器高度时，多行会把行距拉得巨大，实际效果是“顶部对齐+超大间距”，不是居中 -
table-cell不支持flex或grid子项，后续加动画或响应式布局会卡住 - Flex 方案兼容性足够好（IE10+ 支持基本
align-items，必要时可用fallback）
容易忽略的细节：margin、white-space 和 min-height
即使 flex 设置对了，也可能因默认样式“失效”。最常被忽略的是段落 <p></p> 的上下边距，以及容器没有最小高度导致内容塌陷。
立即学习“前端免费学习笔记（深入）”；
-
<p></p>默认有margin，必须显式设为margin: 0 - 如果文本极短，又没设
min-height，容器可能高度为 0，看起来像没生效 - 用
white-space: normal确保换行正常（尤其当父级误设了nowrap） - 避免在 flex 子项上设
float或position: absolute，这会让它脱离 flex 流
文本垂直居中看着简单，但实际要同时管住容器高度、子项默认样式、flex 轴向定义和浏览器渲染细节。漏掉其中任何一个，就容易变成“写了却不动”。
