Bootstrap 4 2列布局，中心对齐，同时保持列背景色的完整大小

我对bootstrap有点陌生，我想知道如何让紫色列保持中心对齐，同时让整个左列保持紫色

到目前为止，我的代码是这样的：

    <div class="container">
<div class="row align-items-center">
  <div class="col col-md-6" style="background-color:#7849b8; height: 100% auto;">
    <div class="headline mt-4 ml-4 mr-4 mb-3">Headline Text Here</div>
    <div class="subline ml-4 mr-4 mb-4">This is Subline text. Ha ahaha<br>Hello</div>
  </div>
  <div class="col col-md-6 p-0" style="background-color:#AEA9F4;">
    <img src="https://via.placeholder.com/490x600" class="img-fluid">
  </div>
</div>

标题文本在这里
这是子行文本。哈哈哈
你好

您可以采取几种不同的方法。一种方法是使用flexbox将列内容包装在自己的div和center中

<div class="container">
    <div class="row">
        <div class="col col-md-6 d-flex" style="background-color:#7849b8;">
            <div class="align-self-center">
                <div class="headline mt-4 ml-4 mr-4 mb-3">Headline Text Here</div>
                <div class="subline ml-4 mr-4 mb-4">This is Subline text. Ha ahaha<br>Hello</div>
            </div>
        </div>
        <div class="col col-md-6 p-0" style="background-color:#AEA9F4;">
            <img src="https://via.placeholder.com/490x600" class="img-fluid">
        </div>
    </div>
</div>

标题文本在这里
这是子行文本。哈哈哈
你好

---

在您的解决方案中，如何使右侧的图像与文本居中（同时保持全色背景）？