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

Question

我对前端 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>

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

Answer 1

你真的需要在这里使用居中概念。我使用了 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>