2019独角兽企业重金招聘Python工程师标准>>> 
现在的手机有很多的需要垂直居中和水平居中，还要和能够很完美的配合适屏的需求，css3中出现了完美的盒模型box-flex和flex弹性布局，网上能找到各种关于这两种布局的资料，用法也不难；
flex布局： display：flex
父节点：
.box {
display: flex;
justify-content: center;
align-items: center; // 垂直居中
}子节点
.item{
flex 1
}
用法链接的资料：flex布局骰子布局 ； Flex 布局教程：语法篇
box布局：display：box
父节点：
.box{
display: box;
box-align: center; //规定如何对齐框的子元素
box-pack: center; // 规定水平框中的水平位置或者垂直框中的垂直位置
}
子节点：
.item{
box-flex:1;
}
用法链接的资料：弹性盒子模型简介
兼容问题
现在大多数的手机都是能够兼容flex布局的，而且我们主要用的也是flex更多一些，所以对于box布局并没有太多的使用与研究，但是最近在使用flex布局的时候却发现华为meta8自带的浏览器（版本比较低的啦）却对这个flex布局不支持，却对下面的这个属性支持，这样又可以使用啦啦啦啦。。。。。
.box{
display: -webkit-box;
}
哈哈，更让人跌破眼镜的是，在兼容华为meta8自带浏览器的时候，因项目中使用的是stylus预处理器，在进行编译的时候却不能编译
.item{
-webkit-box-flex:1;
}
最后的最后加了一个padding的属性才可以编译，虽然不知道为啥，但是编译成功了,而且值得注意的是：这个padding的属性必须放紧挨着才可以编译，虽然觉得有点不可思议。。。。。
.item{
-webkit-box-flex:1;
padding 0
}