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

Issue

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

Solution

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>

Answered By - skovy