带有引导类的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;
}

我不会让我的项目垂直居中。我将无法实现它，因为我使用bootstrap类来水平居中。

Answer 1

Bootstrap 4

Bootstrap 4默认情况下是flexbox，并且有用于居中和对齐的flexbox utility classes。align-items-center类将适用于vertically center rows and columns。

Bootstrap 3.x (原始答案)

如果你把div和它的容器设为100%的高度，它将在水平和垂直方向居中：

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