绝对定位 + transform 是唯一不依赖尺寸的真居中：用 position: absolute + transform: translate(-50%, -50%) 实现精确居中，需父容器设 position: relative，子元素设 top: 50%、left: 50%。
绝对定位 + transform 是唯一不依赖尺寸的真居中
当你需要把一段文字（比如标题、提示语）在某个特定背景容器里精确居中，且该容器尺寸可能动态变化、或内部有复杂布局干扰时，position: absolute + transform: translate(-50%, -50%) 是最可靠的选择。它不依赖文字宽度、行高、父容器 text-align 设置，也不受 flex/grid 父容器的对齐规则影响。
常见错误现象：top: 50%; left: 50% 加了但文字左上角卡在中心点——漏了 transform；或者文字被裁切——父容器没设 position: relative，导致定位上下文错乱。
- 必须给父容器加
position: relative（或absolute/fixed），否则top/left会相对于 viewport 计算 - 子元素要显式设
position: absolute，并写全四值：top: 50%、left: 50%、transform: translate(-50%, -50%) - 如果文字是多行，
transform仍有效，但需注意父容器是否设置了overflow: hidden导致截断 - IE11 支持
transform，但对translate()的百分比解析偶有偏差，可加margin-top: -XXpx微调（不推荐，优先降级用 flex）
flex 布局下 text-align 完全不参与水平对齐
很多人在 flex 容器里给文字加 text-align: center，发现没反应——不是 bug，是设计如此。justify-content: center 已接管水平对齐逻辑，text-align 在 flex item 内部只影响换行文本的对齐，不影响 item 自身位置。
适用场景：你有一块带背景色的 banner 区域，里面放标题和副标题，想让它们整体水平+垂直居中，且响应式缩放。
- 父容器必须设
display: flex、justify-content: center、align-items: center - 父容器要有明确高度（如
height: 200px或min-height: 100vh），否则align-items无效 - 文字元素本身无需额外样式，但若含多行内容，建议包一层
div避免p的默认 margin 干扰视觉居中 - 避免把
img和文字直接平级放在 flex 容器里——它们会被当作两个独立 item，可能左右错开；统一包进一个子容器再居中
text-align: center 只对父容器内的行内内容生效
如果你的“特定背景”是一个简单 div，里面只有纯文字或 img，且不需要垂直居中，text-align: center 是最快方案。但它只作用于父容器，且只影响行内级内容。
常见错误现象：给文字本身加 text-align: center 没用；给父 div 加了但文字没动——实际是父容器宽度太小，或被 padding 推偏，或父容器是 inline-block 且未设宽。
- 必须写在文字的**直接父容器**上，例如：
<div style="text-align: center"><p>文字</p></div> -
p、span、img（默认 inline）都会被居中；但子div不会，除非设display: inline-block - 若父容器是
flex或grid，text-align对其直系子元素无效，只影响子元素内部的换行文本 - 调试技巧：用开发者工具选中文字，看 computed 样式里
text-align是否继承自父级，以及是否被更高优先级规则覆盖
line-height 实现单行文字垂直居中容易踩坑
当背景容器高度固定、文字仅一行时，line-height 设为容器高度是最轻量解法。但它本质是调整行框高度，不是真正“居中”，一旦字号变大或换行就失效。
适用场景：按钮内文字、导航栏标签、固定高度 banner 中的单行标题。
- 容器必须有明确
height，且line-height值等于该高度（单位一致，如都用 px） -
line-height是基于字体大小计算的，如果父元素用了em或rem，值会随根字号缩放，容易偏移 - 不要对多行文字用此法——第二行会直接顶到容器底边，甚至被裁掉
- 如果容器用了
padding，line-height应基于内容区高度，而非整个容器高度；更稳妥的做法是去掉padding，改用flex或absolute
真正难的不是选哪个方法，而是先搞清你到底想居中什么：是“文字在背景框里”，还是“整个文字块在页面上”。混淆这两者，所有代码都会看起来像失效了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
