Bootstrap：垂直居中容器流体

我正在尝试将容器流体置于其父容器（正文标记）中。这是我的网页的一个例子：Bootstrap：垂直居中容器流体

有问题的容器是我用黑色着色以识别更好的那个。还有其他两个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%; 
}

来源

2016-09-19 Sherokan

提供HTML和CSS为 –

您可能会发现一个角指令，在那里，可以做到这一点的元素。内容是否会比可见屏幕大？如果是这样，请在发生这种情况时考虑更改布局。 – spongessuck

@ Dejan.S完成，谢谢 – Sherokan

基本上，这个问题一直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

来源

2016-09-19 14:12:17 ZimSystem

谢谢！我之前看到过这个链接，但之前对我来说不起作用。这给了我奇怪的布局，我认为那不是我正在寻找。原来我与另一个div有冲突，这个自定义类把所有的东西搞砸了。 – Sherokan

谢谢。像BS3一样迷人 –

Bootstrap：垂直居中容器流体

回答

相关问题