Html 垂直对齐以bootstrap4按钮作为定位点

我试着用bootstrap4获得3个按钮，一个大的按钮在左边，两个小的按钮在另一个按钮的上面，在右边，我用btn组这样做。我希望左边的大按钮占据整列（即其他两个按钮的总和在另一个按钮上的高度），并使按钮的所有文本居中，如下所示：

+-------+-------+ | | 2 | | 1 +-------+ | | 3 | +-------+-------+ +-------+-------+ | | 2 | | 1 +-------+ | | 3 | +-------+-------+ 如果我使用按钮，效果会很好，但是当我使用锚时，我无法让第一个大按钮的内容垂直居中

有效的方法是：

<div class="btn-group btn-block">
  <button type="button" class="btn btn-primary p-5 w-50">1</button>
  <div class="btn-group-vertical w-50">
    <button type="button" class="btn btn-secondary p-5">2</button>
    <button type="button" class="btn btn-success p-5">3</button>
  </div>
</div>

1.
2.
3.

给出我想要的输出，“1”垂直居中。 但是当我把它改成

<div class="btn-group btn-block">
  <a href="#" role="button" class="btn btn-primary p-5 w-50">1</a>
  <div class="btn-group-vertical w-50">
    <a href="#" role="button" class="btn btn-secondary p-5">2</a>
    <a href="#" role="button" class="btn btn-success p-5">3</a>
  </div>
</div>

“1”不再垂直对齐，而按钮仍占据其应占据的所有空间。我尝试了很多技巧，但都没有达到预期的效果（我可以让左键居中，但不能占据整列）。 当我从一个按钮转到另一个锚点时，我遗漏了什么？我可能会使用onlick或其他方法，但我真的很想知道当我使用锚时会发生什么

---

[编辑：虽然此问题被标记为与其他垂直对齐问题的重复，但此问题具体说明了从按钮转到锚定位置时会发生什么情况。@b删除的答案完美地暗示了该问题在锚定位置时会失去弹性行为]

不确定为什么这无法正常工作，但您可以使用一些自定义样式来修复它

只需将其添加到css中，每个锚点内的文本就会居中：

a.btn{
显示器：flex；
对齐项目：居中；
证明内容：中心；
}