ブートストラップパネルをフレックスボックスと垂直に整列

Question

フレックスボックスを使用してブートストラップパネルを垂直に整列させたいのですが、わかりません。

HTML

<div class="container"> 
    <div class="row vertical-align"> 
     <div class="col-md-8"> 
      <div class="panel panel-default"> 
       <div class="panel-heading">Title</div> 
       <div class="panel-body"> 
        <p>Bla bla</p> 
       </div> 
      </div> 
     </div> 
    </div> 
</div> 

CSS

html, body { 
    height:100%; 
} 

.vertical-align { 
    display: -webkit-box; 
    display: flex; 
    -webkit-box-align: center; 
    align-items: center; 
    -webkit-box-pack: center; 
    justify-content: center; 
} 

水平整列作品、唯一の垂直方向の整列は何もしません。パネルが画面の上部に貼り付けられます

Answer 1

コンテナに高さを与え、垂直方向の高さを100％に設定する必要があります。

html, 
body { 
    height: 100%; 
} 

.container { 
    height: 100% 
} 

.vertical-align { 
    display: -webkit-box; 
    display: flex; 
    -webkit-box-align: center; 
    align-items: center; 
    -webkit-box-pack: center; 
    justify-content: center; 
    height: 100%; 
    background-color: pink; 
} 

ここでは、すべてのコンテナの高さを100％にしていますが、実際のコードでは異なるものをターゲットに設定することをお勧めします。

http://codepen.io/anon/pen/zKZvOE

Answer 2

不明身長：

.vertical-align { 
position: absolute; 
top: 50%; 
transform: translateY(-50%); 
} 

フレキシボックス：

.vertical-align { 
    height: 300px; // 
    display: flex; 
    justify-content: center; 
    align-items: center; 
}