带有CSS

Question

似乎无法让我的jumbotron显示在我的页面中央。尝试了几个css技巧，但没有任何工作，我怎么能让这个jumbotron垂直对齐？

.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>

Answer 1

要将jumbotron放在页面的垂直中心，您可以使用position: absolute。

有关规则的详情，请参阅MDN上的排名。

＆＃13;

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

或者您可以坚持Flexbox，其中您要定位background div，而不是 jumbotron 本身（以及添加html, body { height: 100%; }你的CSS规则）

＆＃13;

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;