html - 我无法在图像中间找到搜索表单

Question

我试图将我的搜索栏定位在图像的中间。我尝试了以下代码但仍然无法正常工作。有任何想法吗？

.headerimage{ background:#000; position:relative;}
.btn-wrapper{ text-align:center; position:absolute; bottom: 50px; margin: 50 auto; width:100%;}
.img-responsive{
  width:100% !important;
  border-radius:0 0 5px 5px !important;
}

 <section id="contact border-bottom">
      <div class="container">
        <div class="row">
          <div class="col-lg-12 mx-auto text-left">
            <h2 class="section-heading">Locate a Store!</h2>
            <br>
            <p class="mb-5"> Some Text </p>
          </div>
        </div>
        <div class="container-fluid headerimage" style="padding:0 !important">
      <div class="col-md-12" style="padding:0 !important">
        <img class="w3-image" src="{% static 'locator/img/map.png' %}" alt="map" width="1500" height="500">
      </div>
      <div class="container">
      <div class="btn-wrapper">
        <form class="form-inline my-2 my-lg-0">
         <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
         <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
       </form>
      </div>
    </section>

Answer 1

.btn-wrapper {
    text-align: center;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}