display: flex是现代项目中实现文字水平垂直居中的最优解，需父容器设明确高度并同时用justify-content和align-items:center，兼容主流浏览器且适配单多行文本。
现代项目中，display: flex 是实现盒子内文字水平垂直居中的最优解，无需知道文字行数、容器高度或字体大小，且兼容性已覆盖所有主流浏览器（包括 Safari 10.1+、Chrome 29+、Firefox 28+、Edge 12+）。
用 flex 实现单行/多行文字居中（推荐首选）
只要父容器是块级元素，直接设 display: flex + 两个对齐属性即可，文字自动居中，不管它是单行还是换行后的多行内容。
常见错误：只写 justify-content: center 忘了 align-items: center，结果只有水平居中；或者忘了给父容器设明确高度（比如 height: 200px 或 min-height: 100vh），导致垂直方向“没地方可居中”。
实操建议：
- 父容器必须有明确的宽高（至少要有
height，否则align-items: center不生效） - 子元素如果是
<p></p>、<span></span>或纯文本，无需额外包裹，直接作为 flex 项目即可 - 若文字需保留换行或最大宽度限制，可在子元素上加
max-width: 100%和text-align: center（仅影响文本内部对齐，不影响 flex 居中逻辑）
用 place-items: center 替代 flex（适合 Grid 场景）
如果你的父容器本就用了 display: grid（比如整体是网格布局），那没必要为了居中再套一层 flex —— 直接用 place-items: center 更简洁，它等价于 align-items: center + justify-items: center。
容易踩的坑：
-
place-items只作用于 grid 项，不是所有子元素都会被居中——只有 display 为grid的直接子元素才受控 - IE 完全不支持
place-items，哪怕加前缀也没用；如需兼容 IE11，退回flex - 如果子元素本身是
display: block且未设置grid-area，它仍会按默认 grid 行列流排布，但居中效果照常生效
别再用 line-height === height 处理多行文字
这个技巧只适用于**严格单行**文本，且一旦文字换行或字体缩放，就会立刻错位。很多开发者在响应式页面里硬写 line-height: 100px，结果在移动端文字撑开两行，整个内容掉出容器顶部。
真实场景中应避免：
- 动态内容（用户输入、CMS 输出）—— 无法预知行数
- 使用 rem/em/vw 字体单位时 ——
line-height难以与容器高度同步缩放 - 配合
overflow: hidden截断文本时 ——line-height会让截断位置不可控
绝对定位 + transform 仅用于无 flex/grid 环境
当项目受限于老旧框架（如某些嵌入式 WebView 或遗留系统），无法使用 flex 或 grid 时，可用 position: absolute + transform: translate(-50%, -50%) 保底。
关键细节：
- 父容器必须设
position: relative，否则top: 50%会相对于视口计算 -
transform的百分比基于元素自身尺寸，所以不需要知道宽高，这点比margin: -50px更安全 - 若文字内容可能为空或极短，建议加
min-width/min-height防止容器塌陷导致定位失效
真正复杂的地方不在选哪种方案，而在于判断「这个容器是否会被 JS 动态修改高度」或「是否要适配屏幕阅读器的语义流」——这时候 flex 的天然流式行为比定位类方案更鲁棒，也更容易和动画、过渡配合。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
