top:50%+translate(-50%,-50%)能居中文字，因top:50%将元素上边缘移至父容器垂直中点，transform再将其向左上各偏移自身宽高一半；需父容器设position:relative，文字层设position:absolute、top:50%、left:50%缺一不可。
为什么 top:50% + translate(-50%, -50%) 能居中文字
因为 top:50% 把元素上边缘移到父容器垂直中点，而 transform: translate(-50%, -50%) 再把自身向左、向上各挪动「自身宽高的一半」，最终实现视觉中心对齐。这比用 margin 或 left/right/top/bottom 配合固定值更可靠——不需要知道文字宽高。
必须确保父容器是相对定位的
绝对定位的子元素（比如文字层）依赖父容器作为定位上下文。如果父容器没设 position: relative，top:50% 会相对于最近的已定位祖先，甚至 <body>，导致偏移错乱。
常见错误写法：
<div class="img-wrapper"> <img src="bg.jpg"> <div class="text">标题</div> </div>
对应 CSS 缺少这句就会失效：
立即学习“前端免费学习笔记（深入）”；
.img-wrapper {
position: relative; /* 必须加 */
}文字容器需设为绝对定位且指定 top/left
只写 translate 不生效，它只是位移操作，前提是元素已经脱离文档流并有初始偏移位置。
正确组合写法（缺一不可）：
position: absolutetop: 50%left: 50%transform: translate(-50%, -50%)
漏掉 left: 50%，文字只会垂直居中；漏掉 position: absolute，top/left 直接被忽略。
图片作为背景时，用伪元素更轻量
如果图片只是装饰性背景，没必要额外套一层 <img> 标签。直接用 ::before 伪元素铺底，文字层保持语义清晰：
.card {
position: relative;
width: 300px;
height: 200px;
background: url(bg.jpg) center/cover;
}
.card::before {
content: "";
position: absolute;
inset: 0;
background: inherit;
z-index: -1;
}
.card .title {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}注意：现代浏览器支持 inset: 0 替代 top:0;right:0;bottom:0;left:0，但 IE 不支持，如需兼容请手动写全。
最常被忽略的是父容器的 position: relative 和文字层的 left: 50% —— 这两个一漏，整个居中逻辑就断了，但错误现象又不报错，只能靠经验排查。
