How can I centralize a text and its border with an image?

I've got an image and a text/border that would like to position in the center of the image. However, even though I am using text-align and I've tried to use vertical-align, the text/border is at the top-left of the background image and not in the center.

This is the code I have so far

.banner-background {
  background-image: url('https://res.cloudinary.com/practicaldev/image/fetch/s--eXgVdE2K--/c_imagga_scale,f_auto,fl_progressive,h_900,q_auto,w_1600/https://dev-to-uploads.s3.amazonaws.com/i/ux6uf870i7esod0sx4sw.png');
  background-size: cover;
  height: 40%;
  background-position: center;
  background-repeat: no-repeat;
}

.banner-background .background-text {
  background-color: rgb(0, 0, 0);
  background-color: rgba(0, 0, 0, 0.4);
  margin: 0;
  border: solid #f1f1f1;
  border-radius: 10%;
  text-align: center;
  font-size: 200%;
  color: #f1f1f1;
  font-family: myFont1;
  font-weight: bold;
  width: 25%;
}

<div class="banner-background">
  <div class="background-text">
    <h2>Hello, world!<br>I am a developer!</h2>
  </div>
</div>

So far, it is displaying like this: Display image

Solution

using flexbox:

.banner-background {
    display: flex;
    align-items: center;
    justify-content: center;
}