Css 引导4中的对齐

我正在尝试调整Bootstrap4中的一些内容。这不是我想的那样，我不明白为什么。具体来说，我无法垂直或水平对齐列中的内容。例如，在本文中，我有以下内容：

<div class="container">
<div class="row">
  <div class="col-8">
    <h2 class="display-4">Some Text</h2>
    <p class="lead">
      Some other details go here. This portion can go up to three lines of text. It will wrap around to the next line. A YouTube video will be available in the right side.
      It's not there because Bootply doesn't allow iframes.
    </p>
  </div>

  <div class="col-4">
    <div style="border:solid 2px #ddd;">
        A vertically centered YouTube video.
    </div>
  </div>
</div>


<div class="row">
  <div class="col-4">
    <div class="card">
      <div class="card-block">
        <div class="row">
          <div class="col-3">
            <div class="fa fa-arrow-right" style="font-size:3.0rem;"></div>                                    
          </div>

          <div class="col-9">
            <h3 class="card-title">Detail</h3>
            <p class="card-text">Here's some more info for you. This could go up to three lines of text. How do I center the arrow?</p>                                            
          </div>
        </div>
      </div>
    </div>        
  </div>
</div>
</div>

一些文本

这里还有其他一些细节。这一部分最多可以有三行文字。它将环绕到下一行。右侧将提供YouTube视频。
它不在那里，因为Bootply不允许使用iframe。

垂直居中的YouTube视频。
细节
这里有更多信息供您参考。这最多可以有三行文字。如何使箭头居中？

---

如何垂直对齐YouTube视频，使其居中？如何垂直对齐箭头使其居中？我甚至无法使箭头水平居中。我试着使用上面提到的

justify content center

，但没有任何运气。我做错了什么？

您需要使用嵌套flexbox

.col-3 {
    display:flex;
    align-items:center;
    justify-content:center;
  }

---

但为什么箭头没有水平居中？