如何将文本及其边框与图像集中在一起？

Question

我有一张图片和一张 text/border 想要放置在图片中央的图片。但是，即使我使用的是文本对齐并且我尝试使用垂直对齐，text/border 位于背景图像的左上角而不是中心。

这是我目前的代码

.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>

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

Answer 1

使用 flexbox：

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

如何将文本及其边框与图像集中在一起？

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

html

css

text-align