text-align: center仅实现水平居中，对垂直居中无效；多行文本垂直居中应使用Flexbox（display: flex + align-items: center）或绝对定位+transform，line-height仅适用于单行固定高场景。
text-align: center 只能水平居中，别指望它管垂直
很多人一上来就给 div 加 text-align: center，发现文字确实水平居中了，但上下还是贴着顶部——这是正常现象。text-align 仅作用于行内内容的**水平对齐**，对块级元素（如 p、h2）自身或其内部多行文本的**垂直位置毫无影响**。如果你的容器高度固定、内容又不止一行，光靠这个属性完全不够。
Flex 布局是现代项目里最省心的解法
给父容器加三行 CSS 就能稳稳搞定多行文本的水平+垂直居中：
-
display: flex—— 把容器变成 Flex 上下文 -
justify-content: center—— 控制主轴（默认水平）居中 -
align-items: center—— 控制交叉轴（默认垂直）居中
示例：
.box { display: flex; justify-content: center; align-items: center; height: 200px; }里面放任意多行 p 或 span 都能自动居中。注意：子元素如果是 inline 类型（比如没设 display 的 span），建议显式加 display: block，避免换行异常；IE11 对 min-height 在 Flex 容器里的表现有 bug，慎用。
绝对定位 + transform 是兼容 IE9/10 的兜底方案
当项目必须支持老浏览器（比如还在用 IE10 的政务系统），flex 不可用时，这个组合依然可靠，但容易漏关键一步：
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
立即学习“前端免费学习笔记（深入）”；
- 父容器必须设
position: relative - 子元素设
position: absolute; top: 50%; left: 50% - **必须加上**
transform: translate(-50%, -50%)—— 漏掉这句，文字会偏移到容器右下角
这个方法不依赖文字行数或字体大小变化，但频繁触发重排（比如文字内容动态增减）会影响性能。另外，别和 margin: auto 混用，绝对定位下它在旧版 Safari 或 IE 中行为不一致。
line-height + text-align 仅适用于单行，强行用于多行会出问题
看到网上有人把 line-height 设得极大（比如 line-height: 300px）来“撑”多行文字居中，结果文字被拉得稀疏变形，甚至换行错位——这是因为 line-height 控制的是**行间距基准值**，不是容器高度的映射。多行文本实际占用高度 = 行数 × 行高，一旦内容变多，就会溢出或截断。真正需要垂直居中多行文本时，这个方法从原理上就不成立。
复杂点在于：没有一种写法能通吃所有场景。Flex 最干净，但得确认目标环境是否支持；绝对定位稳妥，但得手动管好父容器的 position 上下文；而任何试图用 line-height “凑”多行居中的做法，本质上都是在掩盖布局逻辑缺陷。
