css - 使用 CSS 在页面中居中 jumbotron

Question

似乎无法让我的超大屏幕显示在我的页面中央。尝试了几个 css 技巧但没有任何效果，我怎样才能让这个超大屏幕垂直对齐？

.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 上的位置有关规则的更多信息。

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>

或者您可以坚持使用 Flexbox其中，您需要定位 background div，而不是 jumbotron 本身(同时添加 html, body { height: 100%; } 到你的 CSS 规则)

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>