Css 元件在引导4和flex中居中

我是网络开发新手

我有这个html：

<section class="boxes">
   <div class="container-fluid">
      <div class="row">
         <div class="col-12 col-lg-4 box1">

            <div class="d-flex justify-content-between">
               <div class="boxes-caption-text d-inline-block">
                  Lorem ipsum dolor sit amet enim. Etiam ullamcorper. Suspendisse a pellentesque
               </div>

               <div class="boxes-caption-number d-inline-block text-right">
                  <div class="border-top w-25 d-inline-block pt-2">01</div>
               </div>
            </div>

            <div class="boxes-title text-center pt-6">Szkolenia</div>
            <div class="boxes-arrow"></div>

         </div>

         <div class="col-12 col-lg-4 box2 d-flex h-100">
            xx2
         </div>
         <div class="col-12 col-lg-4 box3">
            xx3
         </div>

      </div>
   </div>
</section> 

我在Bootstrap4中完成我的项目

我想做这样的东西：

我的实际预览（我制作第一个框）：

我有问题的中心箭头，并设置在底部和文字“szkolenia”（我需要设置在中心div）

我怎样才能做到

---

请帮助我创建此规则并将其放置在css中

.container-fluid .row .col-12.col-lg-4 {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

---

这是工作：）谢谢。如何将箭头居中并添加填充底部：/：）尝试将

对齐项目：居中

添加到我上面编写的规则中。

.container-fluid .row .col-12.col-lg-4 {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}