Flexboxブートストラップクラスの縦と横のセンター

Question

私はログイン画面を縦に整列しようとしています。 Here is my code in JS Fiddleと私は垂直方向の中央私の項目を取得していない午前CSS

.flexbox-container { 
    display: -ms-flexbox; 
    display: -webkit-flex; 
    display: flex; 
    -ms-flex-align: center; 
    -webkit-align-items: center; 
    -webkit-box-align: center;. 
    align-items: center; 
} 

を使用。私は水平中心にブートストラップクラスを使用するので、私はそれを達成することはできません。あなたはdiv要素とそれのコンテナの100％の高さを作る場合には、水平方向と垂直方向の両方を中心に説明する

Answer 1

は：

html, 
body, 
.fluid-container { 
    height: 100%; 
} 

.flexbox-container { 
    display: -ms-flexbox; 
    display: -webkit-flex; 
    display: flex; 
    -ms-flex-align: center; 
    -webkit-align-items: center; 
    -webkit-box-align: center; 
    align-items: center; 
    height: 100%; 
} 

Demo

別のオプション（for modern browsers）vhビューポートユニットを使用して完全な高さを設定することです：

.flexbox-container { 
    display: -ms-flexbox; 
    display: -webkit-flex; 
    display: flex; 
    -ms-flex-align: center; 
    -webkit-align-items: center; 
    -webkit-box-align: center; 
    align-items: center; 
    height: 100vh; 
} 

Demo 2