垂直对齐引导面板与柔性盒

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

您需要给容器一个高度并将.vertical-align的高度设置为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%); 
} 

Flexbox的：

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