line-height不能实现多行文本垂直居中，因其仅控制单行行高，多行时各行堆叠导致整体偏上或溢出；可靠方案是display: flex + align-items: center（需容器有明确高度）或grid等现代布局。
直接给容器设 display: flex + align-items: center 就能实现多行文本整体垂直居中，但必须确保容器有明确高度或最小高度，否则对齐基准缺失。
为什么 line-height 在多行文本里失效
line-height 只控制单行文本的行高，当文字换行后，它会让每行都按该值撑开，导致整体高度翻倍、文字堆叠或溢出容器。比如容器 height: 60px，设 line-height: 60px 后两行文字实际占用约 120px 高度，视觉上完全错位。
- 仅适用于「固定高度 + 单行不换行」场景
- 若容器用
min-height而非height，line-height无法锚定垂直中点 - 响应式宽度下文字自动换行时，
line-height完全失去控制力
align-items: center 必须配合明确高度才能生效
Flex 的 align-items: center 是基于容器的交叉轴（垂直方向）长度计算中点的。如果容器高度由内容撑开（比如没设 height 或 min-height），浏览器无法确定“中心在哪”，结果就是文字贴顶。
- 推荐用
min-height而非height，兼顾内容自适应和对齐基准 - 例如：
min-height: 48px比height: 48px更安全，避免内容超长时被裁剪 - 表格单元格中需额外加
td.flex-center { display: flex; align-items: center; justify-content: center; min-height: 40px; }
文本是匿名 flex item，无需额外包裹
HTML 中未被元素包裹的纯文本，在 Flex 容器里会被自动包装成一个匿名 flex item。这意味着你不需要给文字套一层 <span></span> 或 <p></p> 才能触发 align-items: center —— 直接对按钮、<div> 等父容器设 flex 属性即可生效。
<ul>
<li>错误写法：<code><button><span>多行文字</span></button> 再对 span 设 flex，徒增嵌套
<button style="display:flex; align-items:center; min-height:48px">第一行<br>第二行</button>
<button><img src="icon.svg">文字</button>，align-items: center 会同时对齐图片和文字盒模型最容易被忽略的是容器高度缺失——哪怕只漏掉一行 min-height，align-items: center 就形同虚设；另外，别在 flex 容器里混用 vertical-align，它会被直接忽略。
