在图像顶部放置文本 [已解决] [重复]

Question

我想在我的白页的中心放置一个图像并在其上添加一个标题（标题会大于图像 || 并且标题中心必须是图像中心）。问题是标题不会出现在图片之上。

我使用 Django 和引导程序 ^^

代码如下：

HTML：

<div class="col-md-7 white nopadding text-center">
            <div class="brand">
                Brand
            </div>
            <div class="heading">
                <img src="{% static '/eyemeet/hero.jpg' %}" class="hero">
                <div class="title ctr">Title</div>
</div>

CSS：

.hero {
    width: 65%;
    height: auto;
}

.title {
    position: absolute;
    background-color: cadetblue;
    top: 50%;
    left: 50%;
}

.ctr {
    position: absolute;
    transform: translate(-50%, -50%);
}

目前发生了什么：

编辑：

我找到了答案！我希望它可以帮助那些仍然想知道如何做的人:) Center text over an image in flexbox

Answer 1

父元素必须是position:relative，然后定位将只包含在这个父元素内部

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

Answer 2

.hero {
    width: 65%;
    height: auto;
}

.title {
    position:absolute;
    top:55%;
    left:50%;
    transform:translate(-50%,-50%);
    background-color: cadetblue;
    width:100px;
    font-size:40px;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="col-md-7 white nopadding py-3 text-center">
            <div class="brand py-2">
                Brand
            </div>
            <div class="heading">
 
                <img src="https://external-content.duckduckgo.com/iu/?u=http%3A%2F%2Fgetwallpapers.com%2Fwallpaper%2Ffull%2Ff%2F3%2Fa%2F807159-download-funny-cats-wallpapers-1920x1200-meizu.jpg&f=1&nofb=1" class="hero">
  <div class="title text-center ml-auto mr-auto ">Title</div>               
</div>