javascript - Bootstrap : Center a container-fluid vertically-6ren

javascript - Bootstrap : Center a container-fluid vertically

转载作者：行者123 更新时间：2023-11-30 11:50:41

我正在尝试将容器流体置于其父容器(body 标签)的中心。这是我的网页示例:

有问题的容器是我涂成黑色以便更好地识别的容器。还有另外两个 div:

 - The top one which is a (nav class="navbar navbar-inverse navbar-fixed-top")
 - The bottom one which is a (nav class="navbar navbar-inverse navbar-fixed-bottom")

问题是:如何让容器流体(黑色)始终位于页面中间？这个容器的内容会动态变化，我不能让它一直保持在中间(顶部和底部的边距相同)

谢谢你们。

编辑:根据要求，HTML 和 CSS:

HTML:

<body ng-controller="LanguageController as language">

<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container">
  <!-- Brand and toggle get grouped for better mobile display -->
  <div class="navbar-header">
    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#language" aria-expanded="false" aria-controls="language">
      <span class="sr-only">Toggle navigation</span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
    </button>
    <a class="navbar-brand" href="#"> {{ language.lblAppName }}</a>
  </div>
  <div class="navbar-collapse collapse" id="language">
    <div class="container vertical-center">
      <label> {{ language.lblSelectLanguage }} </label>
      <select ng-options="item for item in language.languages" ng-model="language.selectedLanguage" ng-change="language.changeLanguage()"></select>
      <button ng-click="language.editLanguage()">{{ language.lblEditLanguage }}</button>
    </div>
  </div>
   </div>
 </nav>


 <div id="corpus" class="container-fluid" ng-view="">
 </div>


<nav class="navbar navbar-inverse navbar-fixed-bottom" role="navigation">
 <div class="container-fluid">
  <!-- Brand and toggle get grouped for better mobile display -->
  <div class="navbar-header">
    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#route" aria-expanded="false" aria-controls="route">
      <span class="sr-only">Toggle navigation</span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
    </button>
    <div class="navbar-brand"> {{ language.lblFooter }} </div>
  </div>
  <div id="route" class="navbar-collapse collapse">
    <ul class="nav navbar-nav">
      <li class="active"><a href="#"> {{ language.lblMainPage }} </a></li>
      <li><a href="#">{{ language.lblFirstPage }}</a></li>
      <li><a href="#">{{ language.lblSecondPage }}</a></li>
      <li><a href="#">{{ language.lblThirdPage }}</a></li>
    </ul>
  </div>
  </div>
</nav>

CSS:

 body {
padding-top: 70px;
/* Required padding for .navbar-fixed-top. Remove if using .navbar-static-    top. Change if height of navigation changes. */
 }

.container {
 display: table;
}

.vertical-center {
 display: table-cell;
 padding-top: 1%;
 padding-left: 5%;
}

.vertical-center label.ng-binding{
color:grey;
}


div#corpus.container-fluid.ng-scope {
background-color:default;
}

div#mainDiv a.ng-binding {
color: black;
text-decoration: underline;
}

.top-buffer { 
margin-top:2%; 
}

最佳答案

基本上这个问题已经answered before .

.vertical-center {
  min-height: 100%;
  min-height: 100vh; 
  display: flex;
  align-items: center;
}

<div class="container-fluid vertical-center">
    Vertically centered in body.....
</div>

http://www.bootply.com/oX2f8eBxFv

关于javascript - Bootstrap : Center a container-fluid vertically，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/39574546/