本文详解如何使用 css 的绝对定位与 transform 技巧，将文字块精准水平垂直居中于图片之上，解决常见布局偏移问题，并提供可直接复用的健壮代码方案。
要实现在图片上完美居中文字（同时满足水平和垂直居中），关键在于建立正确的定位上下文并避免依赖 margin: 0 auto（对绝对定位无效）或固定 top/left 值。原代码中 #text-block 虽设为 position: absolute，但其父容器 #top-of-page 缺少 position: relative，导致绝对定位参照的是文档流根元素（如
），而非图片容器，因此文字无法随图定位；此外，margin: 0 auto 对绝对定位元素无水平居中效果。✅ 正确做法是：
- 为图片包裹一层相对定位容器（如 .image），作为文字的定位上下文；
- 将文字容器设为绝对定位，并通过 top: 50%; left: 50% 将其左上角锚定到父容器中心；
- 用 transform: translate(-50%, -50%) 反向偏移自身宽高的一半，实现真正居中；
- 添加 z-index 确保文字层叠在图片上方。
以下是完整、可直接运行的示例代码：
<div id="top-of-page">
<div class="image">
@@##@@
<div id="text-block">
<h1>Title</h1>
</div>
</div>
</div>#top-of-page {
margin: 10px;
}
.image {
position: relative;
display: inline-block; /* 推荐：避免宽度撑满父容器，适配图片原始尺寸 */
}
.image img {
display: block; /* 消除图片底部默认空白间隙 */
width: 100%;
height: auto;
}
#text-block {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 100;
background-color: rgba(0, 0, 0, 0.5);
color: white;
padding: 20px;
text-align: center; /* 确保内部文本也居中 */
margin: 0; /* 清除 h1 默认外边距 */
}
#text-block h1 {
margin: 0;
font-size: 1.8rem;
}⚠️ 注意事项：
- 不要遗漏 .image { position: relative } —— 这是绝对定位生效的前提；
- transform: translate(-50%, -50%) 是现代居中核心，兼容性良好（IE10+），比传统负 margin 更可靠；
- 使用 display: inline-block 或 max-width 控制 .image 容器尺寸，防止图片被强制拉伸；
- 若需响应式支持，可结合 @media 查询调整 padding 或 font-size；
- 始终为
添加 alt 属性以保障可访问性。
此方法结构清晰、语义合理、浏览器兼容性强，是现代前端实现“图文叠加居中”的推荐实践。
