Center search field using Twitter Bootstrap - html

Question

As most people seem to have this problem I've gone through a lot of answers, but none have worked for me yet.
I'm looking to center the search box and search button
<div class="hero-unit">
<div class="main-top-container">
<%= simple_form_for(#search, :url => search_properties_path, :method => :post, :html=> { class: 'input-height', id: 'main_search_form' }) do |f| %>
<div class="row main-top-search-row">
<div class="container">
<div class="row">
<h1 class="col-sm-12 search-title">Find magic</h1>
<div class="main-top-searchfield col-sm-4">
<%= f.input :location, :required => false, label: false, input_html: {id: "search_query", class: "form-control typeahead"}, :placeholder => "Search..." %>
</div>
<%= button_tag( :class => "btn btn-primary btn-custom-red col-md-1", :id => "search_button") do %>
Search
<% end %>
<!-- <div class="col-sm-3 col-sm-offset-1">
<a class="how-it-works" href="/faq">How It works</a>
</div> -->
</div>
</div>
</div>
<% end %>
</div>
</div>
I have tried to use CSS on each element, but for some reason it does not allow me to align center.....

Answer 1

DEMO: https://jsbin.com/piwefi/
CSS:
html,
body {
height: 100% /* not necessary if you have a fixed height on the feature area */
}
/* ------ featurette */
.featurette {
display: table;
width: 100%;
height: 30%; /* set a pixel height and then remove the body,html height */
vertical-align: middle;
background: #555;
color: #fff;
}
.featurette-inner {
display: table-cell;
vertical-align: middle;
}
.featurette .search {
padding: 3%;
max-width: 980px; /*max width of search*/
margin: 0 auto;
}
.no-margin-top {
margin-top: 0
}
/* ------ form-control-lg */
.form-control-lg {
min-height: 46px;
border-radius: 6px;
font-size: 18px;
line-height: normal;
}
/* ------ disjointed form group custom */
.featurette .search.has-button .btn {
margin-top: 5px;
width: 100%;
}
#media (min-width:480px) {
.featurette .search.has-button .form-group {
position: relative;
padding-right: 99px; /*space for button*/
}
.featurette .search.has-button .btn {
position: absolute;
top: 0;
right: 0;
width: auto;
margin: 0;
}
}
HTML
<!-- example 1 -->
<div class="featurette">
<div class="featurette-inner text-center">
<form role="form" class="search">
<h3 class="no-margin-top h1">Search Me.</h3>
<div class="input-group input-group-lg">
<input type="search" placeholder="search" class="form-control">
<span class="input-group-btn">
<button class="btn btn-danger" type="button">Search</button>
</span>
</div>
<!-- /input-group -->
</form>
<!-- /.max-width on this form -->
</div>
<!-- /.featurette-inner (display:table-cell) -->
</div>
<!-- /.featurette (display:table) -->
<hr>
<!-- example 2 -->
<div class="featurette">
<div class="featurette-inner text-center">
<form role="form" class="search has-button">
<h3 class="no-margin-top h1">Search Me.</h3>
<div class="form-group">
<input type="search" placeholder="search" class="form-control form-control-lg">
<button class="btn btn-lg btn-warning" type="button">Search</button>
</div>
<!-- /form-group -->
</form>
<!-- /.max-width on this form -->
</div>
<!-- /.featurette-inner (display:table-cell) -->
</div>
<!-- /.featurette (display:table) -->