将 Bootstrap 面板与 flexbox 垂直对齐

Question

我想使用 flexbox 垂直对齐 Bootstrap 面板，但我想不通。

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%);
}

弹性盒：

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