Adjust the inline bootstrap form inside the rotary banner and adjust the fields

Question

I have a form that I tried to put in the middle of a revolving banner, but it stayed that way:

How I would center in the middle of the banner and the fields get more harmonic within the div?

<form class="form-inline" style="padding: 10px; width: 870px; background: rgba(0,0,0,.4);  margin: 150px 10%; position: absolute; z-index: 9999999999">
    <div align="center"><h1 style="color: #FFF; padding: 10px">Sua casa nova está aqui!</h1></div>

               <div class="form-group col-lg-3">
                   <select method="post" class="form-control" style="width: 100%">
                     <option>O que deseja?</option>
                     <option>Alugar</option>
                     <option>Lançamentos</option>                                          
                 </select>
               </div>                                    
               <div class="form-group col-lg-3">
                 <select method="post" class="form-control" style="width: 100%">
                     <option>Qual tipo?</option>
                     <option value="Todos" style="background-color: #F5F5F5; font-weight: bold">Todos</option>
                     <option value="Todos">  - Todos os imóveis</option>
                     <option value="Todos" style="background-color: #F5F5F5; font-weight: bold">  Residencial</option>
                     <option value="Todos">  - Apartamento padrão</option>
                     <option value="Todos">  - Casa de condomínio</option>
                     <option value="Todos">  - Casa de vila</option>
                     <option value="Todos">  - Casa padrão</option>
                     <option value="Todos">  - Cobertura</option>                                                             
                 </select>
               </div>
               <div class="form-group col-lg-3">
                 <select method="post" class="form-control" style="width: 100%">
                     <option>Localização</option>
                     <option>Botafogo</option>
                     <option>Ipanema</option>
                     <option>Copacabana</option>                                          
                 </select>
               </div>
      <div class="form-group col-lg-3">
          <button type="submit" class="btn btn-primary"><span class="glyphicon glyphicon-search" aria-hidden="true"></span>  Buscar</button>
      </div>
</form>

Answer 1

Since the <form> is with absolute positioning is not possible to center with margin: 150px auto. Instead you can apply left:50% and then pull to the left in half the size of the element with margin-left: -435px;.

Thus:

<form class="form-inline" style="padding: 10px; width: 870px; background: rgba(0,0,0,.4);  margin-top: 150px;margin-left:-435px;left:50%; position: absolute; z-index: 9999999999">

Or trying to visualize in a clearer way:

padding: 10px; 
width: 870px; 
background: rgba(0,0,0,.4);  
margin-top: 150px; /*alterado*/
margin-left:-435px; /*novo*/
left:50%; /*novo*/
position: absolute; 
z-index: 9999999999;

Notice I also switched the margin I was about to be alone margin-top. As for the spacing of the elements is only apply margin and padding necessary to stay more or less spaced between each other until you hit your liking.

Answer 2

So it gets more presentable and harmonic:

Instead of setting a fixed width for the <form> pq this will break the Bootstrap function in responsive layouts (when the screen is less than the set value), just omit the width and centralize with transform, keeping the left at 50%:

-webkit-transform: translate(-50%, 0); -moz-transform: translate(-50%, 0); transform: translate(-50%, 0);

Would look like this:

<form class="form-inline" style="padding: 10px; text-align: center; background: rgba(0,0,0,.4);  margin-top: 150px;position: absolute; z-index: 9999999999;-webkit-transform: translate(-50%, 0); -moz-transform: translate(-50%, 0); transform: translate(-50%, 0); left: 50%;">

Already the H1, not to leave too much space on the main text, you put:

padding:0 0 20px 0; margin: 0;

Thus remaining:

<h1 style="color: #FFF;padding:0 0 20px 0; margin: 0px;">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="http://cinebsb.tempsite.ws/scripts/jquery-1.11.0.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<form class="form-inline" style="padding: 10px; text-align: center; background: rgba(0,0,0,.4);  margin-top: 150px;position: absolute; z-index: 9999999999;-webkit-transform: translate(-50%, 0); -moz-transform: translate(-50%, 0); transform: translate(-50%, 0); left: 50%;">
    <div><h1 style="color: #FFF;padding:0 0 20px 0; margin: 0px;">Sua casa nova está aqui!</h1></div>

               <div class="form-group col-lg-3">
                   <select method="post" class="form-control" style="width: 100%">
                     <option>O que deseja?</option>
                     <option>Alugar</option>
                     <option>Lançamentos</option>                                          
                 </select>
               </div>                                    
               <div class="form-group col-lg-3">
                 <select method="post" class="form-control" style="width: 100%">
                     <option>Qual tipo?</option>
                     <option value="Todos" style="background-color: #F5F5F5; font-weight: bold">Todos</option>
                     <option value="Todos">  - Todos os imóveis</option>
                     <option value="Todos" style="background-color: #F5F5F5; font-weight: bold">  Residencial</option>
                     <option value="Todos">  - Apartamento padrão</option>
                     <option value="Todos">  - Casa de condomínio</option>
                     <option value="Todos">  - Casa de vila</option>
                     <option value="Todos">  - Casa padrão</option>
                     <option value="Todos">  - Cobertura</option>                                                             
                 </select>
               </div>
               <div class="form-group col-lg-3">
                 <select method="post" class="form-control" style="width: 100%">
                     <option>Localização</option>
                     <option>Botafogo</option>
                     <option>Ipanema</option>
                     <option>Copacabana</option>                                          
                 </select>
               </div>
      <div class="form-group col-lg-3">
          <button type="submit" class="btn btn-primary"><span class="glyphicon glyphicon-search" aria-hidden="true"></span>  Buscar</button>
      </div>
</form>