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：垂直居中容器流體

回答

相關問題