在引导5中在img元素内制作一个按钮

Question

我试图在img元素中构建一个按钮，更具体地说是在引导5中的img元素的中间。现在，iamge没有在网格上使用背景，我正在使用一些动画放大:悬停。我想知道，是否有一种方法可以使用Bootstrap 5类来构建它，而不是采用常规的方法:父容器位置相对&子div位置是绝对的？代码包括在下面，谢谢提前！

      <div class="col-md-6  min-vw-50 min-vh-100 px-0">
    <div class="row mx-0 px-0">
      <div class="col-md-6 px-0">
        <div class=" border border-white border-5 img-hover-zoom img- 
hover-zoom--slowmo button-container">
            <img src="images/netflix.png" style="height: 50vh; width: 
auto;" alt="">

<!----------- THE BUTTON, our main suspect ---------------->
          <button class="btn">
          <a href=""> MORE </a> 
          </button> 

        </div>  
      </div>

Answer 1

<div class="col-md-6  min-vw-50 min-vh-100 px-0">
    <div class="row mx-0 px-0">
        <div class="col-md-6 px-0">
            <div
                class=" border border-white border-5 img-hover-zoom img- hover-zoom--slowmo button-container position-relative">
                <img src="images/netflix.png" class="img-fluid" style="height: 50vh; width: auto;" alt="">

                <!----------- THE BUTTON, our main suspect ---------------->
                <button class="btn position-absolute top-50 start-50 translate-middle">
                    <a href=""> MORE </a>
                </button>

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

您可以将此引导类用于解决方案。