大佬教程收集整理的这篇文章主要介绍了css – 垂直对齐 – IE10 Flex盒无法正常工作，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。
html {
height: 100%;
}
body {
background: red;
font-family: 'Open Sans';
min-height: 100%;
width: 100%;
display: -webkit-box;
-webkit-box-orient: horizontal;
-webkit-box-pack: center;
-webkit-box-align: center;
display: -moz-box;
-moz-box-orient: horizontal;
-moz-box-pack: center;
-moz-box-align: center;
display: -ms-flexbox;
-ms-box-orient: horizontal;
-ms-box-pack: center;
-ms-box-align: center;
display: box;
box-orient: horizontal;
box-pack: center;
box-align: center;
text-align: center;
}
.box {
background: none repeat scroll 0 0 #E7F3FF;
border: 4px solid #FFFFFF;
border-radius: 16px 16px 16px 16px;
box-shadow: 0 2px 2px rgba(1,1,0.2);
color: #054B98;
height: 620px;
margin: 0 auto 20px;
position: relative;
width: 930px;
}
body {
background: red;
font-family: 'Open Sans';
min-height: 100%;
width: 100%;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-pack: center;
-moz-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;
-webkit-box-align: center;
-moz-box-align: center;
-ms-flex-line-pack: center;
-webkit-align-content: center;
align-content: center;
}
但是,如果您使用Flexbox进行垂直对齐,则可能需要这样做：
body {
background: red;
font-family: 'Open Sans';
min-height: 100%;
width: 100%;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-pack: center;
-moz-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;
-webkit-box-align: center;
-moz-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
}
请注意,box-align和flex-align / align-items不是等效属性,但它们在此处执行相同的任务.
以上是大佬教程为你收集整理的css – 垂直对齐 – IE10 Flex盒无法正常工作全部内容，希望文章能够帮你解决css – 垂直对齐 – IE10 Flex盒无法正常工作所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。