Html 将带有图像和浮动文本的框居中放置在引导中

我怎样才能将一张图片和两个标题放在方框的中间

  <div class="py-1 py-sm-5">
    <div class="box">
      <img src="img/logo_gross.png" class="mx-auto d-block col-lg-3 col-sm-6 col-8 img-fluid float-sm-left" alt="Dennis Pfeiffer Asslar - Dienstleistung Professionell">
      <h1 class="text-center text-sm-left"><span class="text-red">dienstleistung</span><span class="text-blue">professionell</span></h1>
      <h1 class="text-center text-sm-left"><span class="text-red">dennis</span> <span class="text-blue">pfeiffer</span></h1>
    </div>
  </div>

目前，所有内容都在左屏幕上对齐，但我希望它居中。 不，使用2 x col-6不是解决方案，因为它不会真正居中。

将容器设置为灵活显示，并将内容对齐设置为居中

---

这是我想要的工作。我想要一个文本居中的方框，在图片的右边，而不是上面。你能把你的代码放在JSFIDLE或codepen中吗？和一个链接到实际的图像或一个类似的尺寸？

<div class="py-1 py-sm-5 d-flex justify-content-center">
  <div class="box">
    <img src="img/logo_gross.png" class="mx-auto d-block col-lg-3 col-sm-6 col-8 img-fluid float-sm-left" alt="Dennis Pfeiffer Asslar - Dienstleistung Professionell">
    <h1 class="text-center text-sm-left"><span class="text-red">dienstleistung</span><span class="text-blue">professionell</span></h1>
    <h1 class="text-center text-sm-left"><span class="text-red">dennis</span> <span class="text-blue">pfeiffer</span></h1>
  </div>
</div>