如何在视口中垂直居中引导容器答案

【问题标题】：How to vertically centre Bootstrap container in viewport如何在视口中垂直居中引导容器
【发布时间】：2023-03-21 12:28:02
【问题描述】：

我试图在视口中垂直居中引导容器。我的代码可以在

看到

http://www.bootply.com/C8vhHTifcE

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

澄清一下：我希望容器在视口中垂直居中，并且我希望能够分隔行以便它们填充空间。

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>

【问题讨论】：

内联样式很难调试（不是在浏览器中而是在问题集中）...
.container 始终居中
没错！它似乎也对我有用。一切以中心为中心！ plnkr.co/edit/iAbntofXeqD0RN14H3IG?p=preview
不！它不是垂直居中的。它有点靠近底部。
啊，他想要垂直的视口中间。

标签： html css twitter-bootstrap

【解决方案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>

【讨论】：