html - 如何在视口(viewport)中垂直居中 Bootstrap 容器

Question

我正在尝试将 Bootstrap 容器在视口(viewport)中垂直居中。我的代码可以在

http://www.bootply.com/C8vhHTifcE

我所有试图以此为中心的尝试都失败了。有人有解决方案吗？

澄清一下:我希望容器在视口(viewport)中垂直居中，并且我希望能够隔开行以填充空间。

HTML

<div class="navbar navbar-inverse navbar-fixed-top">
  <div class="container">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">Brand</a>
    </div>
    <div class="collapse navbar-collapse">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Home</a></li>
        <li><a href="#about">About</a></li>
        <li><a href="#contact">Contact</a></li>
      </ul>
    </div><!--/.nav-collapse -->
  </div>
</div>

    <div class="container">
        <div class="row text-center">
          <div class="col-md-offset-2 col-md-8">
            A HEADING
          </div>
        </div>

        <div class="row text-center">
          <div class="col-md-offset-2 col-md-8">
            AN ITEM
          </div>
        </div>
        <div class="row text-center">
          <div class="col-md-offset-2 col-md-8">
            ANOTHER ITEM
          </div>
        </div>
        <div class="row text-center">
            <div class="col-md-offset-2 col-md-8">
                <input value="A BUTTON" style="width:100px;" type="button">
            </div>
        </div>
        <!-- /.row -->
    </div>

Answer 1

演示:http://www.bootply.com/AGZSk1TaJc

CSS:

body {
    padding-top: 50px
}
body,
html {
    height: 100%
}
.display-table {
    display: table;
    height: 100%;
    width:100%;
    max-width:1170px;
    margin:0 auto;
}
.display-table-cell {
    display: table-cell;
    width: 100%;
    vertical-align: middle;
}
.display-table-cell > div {
    display: table;
    width: 100%;
    height: 25%;
}
.display-table-cell > div > span {
    display: table-cell;
    width:100%;
    vertical-align: middle;
}
.display-table-cell > div:nth-child(even) {
    background: #f7f7f7
}
.display-table-cell > div:nth-child(odd) {
    background: #eee
}

HTML

<div class="navbar navbar-inverse navbar-fixed-top">
   <div class="container">
      <div class="navbar-header">
         <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
         <span class="icon-bar"></span>
         <span class="icon-bar"></span>
         <span class="icon-bar"></span>
         </button>
         <a class="navbar-brand" href="#">Brand</a>
      </div>
      <div class="collapse navbar-collapse">
         <ul class="nav navbar-nav">
            <li class="active"><a href="#">Home</a></li>
            <li><a href="#about">About</a></li>
            <li><a href="#contact">Contact</a></li>
         </ul>
      </div>
      <!--/.nav-collapse -->
   </div>
</div>
<div class="container display-table text-center">
   <div class="display-table-cell">
     <div><span>A HEADING</span></div>
        <div><span>AN ITEM</span></div>
        <div><span>ANOTHER ITEM </span></div>
      <div><span><input value="A BUTTON" class="btn btn-default" type="button"><span></span></span></div>
   </div>
</div>