twitter-bootstrap Flexbox 垂直和水平中心与引导类
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/36553019/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Flexbox Vertical and horizontal center with bootstrap classes
提问by Alaksandar Jesus Gene
I am trying to vertically align my login screen. Here is my code in JS Fiddleand used the css
我正在尝试垂直对齐我的登录屏幕。这是我在 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;
}
I am not getting my items vertically centered. Will i wont be able to achieve it since i use bootstrap class to horizontal center.
我没有让我的物品垂直居中。我将无法实现它，因为我使用引导程序类来水平居中。
回答by Zim
Bootstrap 4
引导程序 4
Bootstrap 4 is flexboxby default, and there are flexbox utility classesfor centering and alignment. The align-items-centerclass will work to vertically center rows and columns.
Bootstrap 4默认是flexbox，并且有用于居中和对齐的flexbox 实用程序类。该align-items-center班将致力于垂直居中的行和列。
Bootstrap 3.x(orignal answer)
Bootstrap 3.x（原始答案）
It will center both horizontally and vertically if you make the div and it's containers 100% height:
如果您将 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%;
}
Another option (for modern browsers) is to set the full height using vhviewport unit:
另一种选择（对于现代浏览器）是使用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;
}
