css - 带有 Bootstrap 类的 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 视口(viewport)单位设置全高:

.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