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

Flexbox的：

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

将Bootstrap面板与flexbox垂直对齐

2 个答案: