Html 将文本放置在图像顶部[已解决]

我想在白色页面的中央放置一个图像，并在其上添加一个标题（标题将比图像大| |而且标题中心必须是图像中心）。问题是标题不会出现在图片的顶部

我使用Django和bootstrap^^

代码如下：

HTML:

烙印
标题

CSS:

.hero{
宽度：65%；
高度：自动；
}
.头衔{
位置：绝对位置；
背景色：卡德蓝；
最高：50%；
左：50%；
}
.ctr{
位置：绝对位置；
转换：翻译（-50%，-50%）；
}

目前发生的情况：

编辑：

---

我找到了答案！！我希望它能帮助那些仍然想知道如何做的人：）

父元素必须是

位置：相对的，然后定位将只包含在这个父元素内部

.heading{
  position:relative;
}
.title{
  position:absolute;
  top:50%;
  right:50%;
}


.hero{
宽度：65%；
高度：自动；
}
.头衔{
位置：绝对位置；
最高：55%；
左：50%；
转换：翻译（-50%，-50%）；
背景色：卡德蓝；
宽度：100px；
字体大小：40px；
}

烙印
标题
我认为您需要添加一些CSS，因为您提供的代码运行良好：我将使用该图像作为标题的背景图像，谢谢您的回答。它可以工作，但标题没有居中。可以用%代替px吗？因此，标题可以是从顶部的50%image@Bonsa检查我编辑了我的答案