html - 在页面上垂直和水平对齐Bootstrap行

我是刚接触HTML / CSS的新手，并且正在使用Bootstrap来建立我的网站页面，并且看起来不错并且响应迅速。但是我有一个带有输入搜索框的页面，希望它在页面上居中。这是我的HTML外观：

html {
  position: relative;
  min-height: 100%;
}
body {
  /* Margin bottom by footer height */
  margin-bottom: 60px;
}
/* for search bar */

.stylish-input-group .input-group-addon {
  background: white !important;
}
.stylish-input-group .form-control {
  border-right: 0;
  box-shadow: 0 0 0;
  border-color: #ccc;
}
.stylish-input-group button {
  border: 0;
  background: transparent;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
  <div class="row">
    <div class="col-sm-6 col-sm-offset-3">
      <div id="imaginary_container">
        <div class="input-group stylish-input-group">
          <input type="text" class="form-control" placeholder="search" autofocus>
          <span class="input-group-addon">
            <button type="submit">
              <span class="glyphicon glyphicon-search"></span>
            </button>
          </span>
        </div>
      </div>
    </div>
  </div>
</div>

我希望做的是将搜索框放在页面的中心，类似于Google的主页。关于如何实现此目标的任何想法？谢谢。

最佳答案

您确实需要在这里使用居中概念。我已经使用了transform方法。

.container {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
}

此处的代码段：

html {
  position: relative;
  min-height: 100%;
}
body {
  /* Margin bottom by footer height */
  margin-bottom: 60px;
}
/* for search bar */

.stylish-input-group .input-group-addon {
  background: white !important;
}
.stylish-input-group .form-control {
  border-right: 0;
  box-shadow: 0 0 0;
  border-color: #ccc;
}
.stylish-input-group button {
  border: 0;
  background: transparent;
}

.container {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
  <div class="row">
    <div class="col-sm-6 col-sm-offset-3">
      <div id="imaginary_container">
        <div class="input-group stylish-input-group">
          <input type="text" class="form-control" placeholder="search" autofocus>
          <span class="input-group-addon">
            <button type="submit">
              <span class="glyphicon glyphicon-search"></span>
            </button>
          </span>
        </div>
      </div>
    </div>
  </div>
</div>

关于html - 在页面上垂直和水平对齐Bootstrap行，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/41109575/