我的中心对齐工作在除IE10之外的所有支持它的浏览器中.我认为我的语法正确并且它支持它.有人可以帮忙吗？
DEMO
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;
}
解决方法
您具有正确的显示值,但您使用的所有其他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-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;
}