单行文字垂直居中用 display: flex + align-items: center，作用于直接父容器且需明确高度；多行文字需加 flex-direction: column 并用 justify-content: center，文字须包裹在标签内且清除 margin。
用 display: flex 让单行文字真正垂直居中
单行文字在容器内上下居中，最稳妥的方式是把容器设为 flex 布局，并用 align-items: center。它不依赖行高、不关心字体大小变化，也不需要额外包装元素。
常见错误是只写 justify-content: center（这只能水平居中），或者误以为 vertical-align: middle 对块级容器有效（它只对 inline 或 table-cell 元素起作用）。
-
display: flex必须加在文字的**直接父容器**上，不是文字本身 - 不需要设置
height，但容器得有明确高度（比如height: 100px或min-height），否则“居中”无参照 - 如果容器里还有其它元素，
align-items: center会让所有子元素一起垂直居中，需注意布局意图
<div style="display: flex; align-items: center; height: 80px; border: 1px solid #ccc;"> <span>我垂直居中了</span> </div>
多行文字用 flex 居中要加 flex-direction: column
默认 flex-direction: row 是横向主轴，align-items 控制的是“横轴上的交叉方向”，即垂直方向；但多行文字本质是换行后的多个块，此时仅靠 align-items: center 不够——因为文字本身没形成一个可居中的“整体块”。
更可靠的做法是让容器变成纵向主轴，再用 justify-content: center 居中内容块：
立即学习“前端免费学习笔记（深入）”；
- 必须显式设置
flex-direction: column -
justify-content: center此时才控制垂直方向（因主轴已变为纵轴） - 文字需包裹在单独标签内（如
<p></p>或<div>），不能直接放裸文本<li>避免给内部文字元素设 <code>margin，否则会干扰居中计算
<div style="display: flex; flex-direction: column; justify-content: center; height: 120px; border: 1px solid #ccc;"> <p style="margin: 0;">第一行<br>第二行<br>第三行</p> </div>
align-items: center 在不同容器高度下的表现差异
当容器高度远大于文字行高时，align-items: center 表现稳定；但当容器高度接近或小于单行文字自然高度（比如 line-height: 1.2 + 字体大小），会出现“看似没居中”的错觉。
这是因为浏览器按 line-height 的基线规则渲染，而 flex 居中依据的是内容盒（content box）的几何中心。两者参考系不同。
- 若容器高度 =
line-height * font-size，且未设box-sizing: border-box，padding/border 会挤占内容区，导致视觉偏移 - 解决方法：统一用
box-sizing: border-box，并确保容器高度包含所有内边距和边框 - 极端情况（如高度
20px内显示16px字体），建议改用line-height: 容器高度+text-align: center更可控
别忘了响应式场景下 flex 的继承与重置问题
用 flex 居中后，在媒体查询中修改容器高度或子元素结构，容易引发意外错位。例如：
- 在小屏下把容器设为
flex-direction: column，但忘了同步调整justify-content和align-items的语义角色 - 用 JavaScript 动态增删子元素后，
flex的默认flex-shrink可能压缩文字导致换行，进而破坏原有居中逻辑 - 某些 UI 框架（如 Bootstrap）的工具类（如
.d-flex）可能覆盖自定义样式，需检查 CSS 优先级
真正难的不是写出那两行 flex 代码，而是想清楚：这个容器是否始终拥有确定的高度？它的子元素会不会动态变化？有没有其他样式在暗中干扰主轴方向？
