Css 灵活的文本容器，可根据内容自动调整大小

我试图在这里创建一个横幅，要求带有bannerText类的标题div始终显示在中间，并且必须显示在中间，白色背景在文本和白色背景边框之间保留30px的填充。我希望横幅文本是流畅的，最大宽度为900px

因此，如果没有几个单词，它必须分解为带有白色背景的30像素填充的内容，而不是保持固定的900px

但一旦标题变长，它就转到下一行，而不会扩展到900px以上

一直以来，文本都应该水平和垂直对齐，我已经这样做了。但我的问题是柔性容器

#横幅{
位置：相对位置；
-webkit字体平滑：抗锯齿；
文本呈现：优化易读性；
最大高度：422px；
溢出：隐藏；
}
#横幅img{
高度：自动；
宽度：100%；
}
.bannerText{
文本对齐：居中；
位置：绝对位置；
最高：50%；
宽度：100%；
字号：700；
字号：2em；
利润上限：-40px；
颜色：#D87A00；
}
#横幅{
宽度：911px；
颜色：#0e2bff；
}

演示横幅标题重置

*{
框大小：边框框；
}
#横幅{
位置：相对位置；
-webkit字体平滑：抗锯齿；
文本呈现：优化易读性；
最大高度：422px；
溢出：隐藏；
}
#横幅广告{
高度：422px；
背景：橙色；
}
.bannerText{
文本对齐：居中；
位置：绝对位置；
最高：50%；
左：50%；
最大宽度：900px；
转换：翻译（-50%，-50%）；
字号：700；
字号：2em；
背景：白色；
}
#横幅{
填充：30px；
颜色：#0e2bff；
}

Lorem ipsum dolor sit amet，奉献精英。阿迪皮西！

Flexbox是你的朋友！别把事情弄得太复杂了。将您的图像设置为横幅的背景图像。横幅中唯一的内容是标题，因此您只需要包装器（横幅）和内容（标题）。带所需属性的2个div。使用Flexbox将标题居中，并设置最大宽度。使用rgba作为颜色以获得透明效果

CSS:

HTML

测试测试测试测试测试测试测试测试测试测试测试

---

最大宽度来自每侧900px-60px的填充物。

我不太明白，但是？太好了！正是我所期望的。谢谢

#banner {
  display:flex;
  align-items:center;
  justify-content:center;
  background:#D60;
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:450px;
}
.title {
  background:rgba(255,255,255,.5);
  color:blue;
  padding:30px;
  max-width:840px;
}

<section id="banner">
  <div class="title">
  Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing Testing 
  </div>
</section>