如何将文本/边框与图像垂直对齐？

问题描述

我有一个图像和一个文本/边框，想要放置在图像的中心。但是，即使我使用了 text-align 并且我尝试使用了 vertical-align，文本/边框仍位于背景图像的左上角而不是中心。

这是我目前的代码

.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);
  background-color: rgba(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>

到目前为止，它是这样显示的： Display image

解决方法

使用弹性盒：

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