How can I align the text in the center of the image - html

Question

I'm trying to center a text inside a div, this div contains an image + another div which contains the text that needs to be centered.
See image the following image:
The problem I'm facing is that the image which is also in the div doesn't allow me to outline the text in the center.
I tried to apply padding and margins(even negatives ones) however with no results
So right now this is the code I have in my HTML & CSS files:
.destinations {
padding: 5px 15px;
}
.destinations img {
max-width: 100%;
max-height: 100%;
border-radius: 10px;
}
.flex-item {
width: 290px;
height: auto;
border-radius: 10px;
margin: auto;
}
.flex-item-title {
text-align: center;
color: white;
background-color: black;
opacity: 0.8;
}
<div class="destinations">
<div class="flex-item">
<img src="assets/img/wassenaar.jpg">
<div class="flex-item-title">Wassenaar</div>
</div>
</div>
I hope you can help me out

Answer 1

Here is one approach to vertically and horizontally center the text over the image:
.destinations {
padding: 5px 15px;
}
.destination {
width: 290px;
height: 290px;
display: flex;
border-radius: 10px;
margin: auto;
background-image: url("https://placekitten.com/500/500");
justify-content: center;
align-items: center;
}
.title {
text-align: center;
color: white;
background-color: black;
opacity: 0.8;
}
<div class="destinations">
<div class="destination">
<div class="title">Wassenaar</div>
</div>
</div>

Answer 2

You can get your porblem solve using following css .
.flex-item{
width:300px;
height:200px;
position: relative;
padding: 0;
margin: 0;
text-align: center;
}
.flex-item-title{
position: absolute;
top: 0; right: 0;
bottom: 0; left: 0;
width: 300px;
height: 200px;
text-align: center;
color: white;
display: inline-table;
vertical-align:middle;
line-height:100%;
}
Try changing your css to this css , it will work .