Html 引导。调整资源中心未居中应用的div

我尝试将搜索表单放入两个父div中。无论我尝试对齐或证明效用，他们都不能把搜索栏放在页面中间，我想要它。< /P>

<div class="col">
  <div class"container-fluid justify-content-center" id="searchform">
    <form class="form-floating form-control-sm" id="form">
      <div class="row " id="div_main">
        <div class="col-auto " id="div_Location">
          <label for="Location">Hunt Location</label><br>
          <select name="cars" id="Location">
            <option value="Gauteng">Gauteng</option>
            <option value="Western Cape">Western Cape</option>
            <option value="Northern Cape">Northern Cape</option>
            <option value="North West">North West</option>
            <option value="Limpopo">Limpopo</option>
            <option value="Free State">Free State</option>
            <option value="Mpumalanga">Mpumalanga</option>
            <option value="Eastern cape">Eastern Cape</option>
            <option value="Kwa-zulu Natal">kwa-zulu Natal</option>
          </select>
        </div>
        <div class="col-auto" id="div_Animal">
          <label for="Animal">Animal</label><br>
          <select name="Animals" id="Animal">
            <option value="" id="ListAnimal"></option>
          </select>
        </div>
        <div class="col-auto" id="div_Check-in">
          <label for="Check-in">Check-in</label>
          <input type="date" class="form-control" id="Check-in" placeholder="Check-in" value="">
        </div>
        <div class="col-auto" id="div_Check-out">
          <label for="floatingInputValue">Check-out</label>
          <input type="date" class="form-control" id="Check-out" placeholder="Check-out" value="">
        </div>
        <div class="col-auto" id="div_Hunters">
          <label for="Hunters">Hunters</label>
          <input type="number" class="form-control" id="Hunters" placeholder="5" value="">
        </div>
        <div class="col-auto">
          <button type="button" class="btn btn-dark d-iline" id="searchbutton"><img src="img/search.png"></img></button>
        </div>
      </div>
    </form>
  </div>
</div>

狩猎地点

豪登省
西开普省
北开普省
西北部
林波波
自由州
姆普马兰加
东开普省
土瓜祖鲁纳塔尔酒店
动物

登记入住
退房
猎人

列的默认行为是占用100%的可用空间，因此

调整资源中心

不会产生任何有意义的效果，因为列的宽度已经达到100%，并且无法相对于父容器居中

如果我们清理您的代码，您所期望的结果可以相当容易地实现（注意：您需要全屏运行此代码段才能看到它）

狩猎地点

豪登省
西开普省
北开普省
西北部
林波波
自由州
姆普马兰加
东开普省
土瓜祖鲁纳塔尔酒店
动物

登记入住
退房
猎人
搜索

有些离题，但通常不需要在列中使用额外的

.container

元素。