Q:

center jumbotron in page with CSS

Cannot seem to get my jumbotron displaying in the center of my page. tried several css tricks but nothing is working, how can i get this jumbotron vertically aligned?

.jumbotron.center {
  opacity: 0.95;
  display: flex;
  align-items: center;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="background">
  <div class="container">
    <div class="jumbotron center">
      <div class="form-inline search-form">
        <div class="form-group search-box">
          <input type="text" id="zipcode" class="form-control" placeholder="Enter Zipcode">
        </div>
        <div class="form-group search-box">
          <select name="radius" id="radius" class="radius-input" onChange="changeRadius(this)">
            <option value='10'>Radius : 10 miles</option>
            <option value='20'>Radius : 20 miles</option>
            <option value='30'>Radius : 30 miles</option>
            <option value='40'>Radius : 40 miles</option>
            <option value='50'>Radius : 50 miles</option>
            <option value='60'>Radius : 60 miles</option>
            <option value='70'>Radius : 70 miles</option>
            <option value='80'>Radius : 80 miles</option>
            <option value='90'>Radius : 90 miles</option>
            <option value='100'>Radius : 100 miles</option>
          </select>
        </div>
        <div class="form-group search-box">
          <button type="button" class="search-button btn btn-success" onclick="search()">
            <i class="glyphicon glyphicon-search"></i>
            <span>Search</span>
          </button>
        </div>
      </div>
    </div>
  </div>
</div>

A:

To place your jumbotron on the vertical center of the page you can use position: absolute.
See Position on MDN for more info on the rules.

html,
body {
  height: 100%;
}
body {
  margin: 0;
  padding: 0;
}
.background {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  transform: translateY(-50%);
  opacity: 0.95;
}
.background .jumbotron {
  margin: 0;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="background">
  <div class="container">
    <div class="jumbotron text-center">

      <div class="form-inline search-form">
        <div class="form-group search-box">
          <input type="text" id="zipcode" class="form-control" placeholder="Enter Zipcode">
        </div>

        <div class="form-group search-box">
          <select name="radius" id="radius" class="form-control">
            <option value='10'>Radius : 10 miles</option>
            <option value='20'>Radius : 20 miles</option>
            <option value='30'>Radius : 30 miles</option>
            <option value='40'>Radius : 40 miles</option>
            <option value='50'>Radius : 50 miles</option>
            <option value='60'>Radius : 60 miles</option>
            <option value='70'>Radius : 70 miles</option>
            <option value='80'>Radius : 80 miles</option>
            <option value='90'>Radius : 90 miles</option>
            <option value='100'>Radius : 100 miles</option>
          </select>
        </div>

        <div class="form-group search-box">
          <button type="button" class="search-button btn btn-success">
            <i class="glyphicon glyphicon-search"></i>
            <span>Search</span>
          </button>
        </div>
      </div>

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

Or you can stick with Flexbox in which you'll want to target the background div, not the jumbotron itself (along with adding html, body { height: 100%; } to your CSS rules)

html,
body {
  height: 100%;
}
body {
  margin: 0;
  padding: 0;
}
.background {
  height: 100%;
  min-width: 100%;
  padding: 0;
  margin: 0;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.95;
}
@media (max-width: 767px) {
  .background .container {
    padding: 0;
    width: 100%;
    padding-left: 15px;
    padding-right: 15px;
  }
}
.background .jumbotron {
  margin: 0;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="background">
  <div class="container">
    <div class="jumbotron text-center">

      <div class="form-inline search-form">
        <div class="form-group search-box">
          <input type="text" id="zipcode" class="form-control" placeholder="Enter Zipcode">
        </div>

        <div class="form-group search-box">
          <select name="radius" id="radius" class="form-control radius-input" onChange="changeRadius(this)">
            <option value='10'>Radius : 10 miles</option>
            <option value='20'>Radius : 20 miles</option>
            <option value='30'>Radius : 30 miles</option>
            <option value='40'>Radius : 40 miles</option>
            <option value='50'>Radius : 50 miles</option>
            <option value='60'>Radius : 60 miles</option>
            <option value='70'>Radius : 70 miles</option>
            <option value='80'>Radius : 80 miles</option>
            <option value='90'>Radius : 90 miles</option>
            <option value='100'>Radius : 100 miles</option>
          </select>
        </div>

        <div class="form-group search-box">
          <button type="button" class="search-button btn btn-success" onclick="search()">
            <i class="glyphicon glyphicon-search"></i>
            <span>Search</span>
          </button>
        </div>
      </div>

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

