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 （orignal answer）

如果你制作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

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

1 个答案: