Flexbox垂直和水平中心,带有引导类

Question

我正在尝试垂直对齐我的登录屏幕.这是我在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实用程序类.该align-items-center班将致力于垂直居中的行和列.

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

演示

另一个选项(对于现代浏览器)是使用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;
}

演示2