现在的手机有很多的需要垂直居中和水平居中，还要和能够很完美的配合适屏的需求，css3中出现了完美的盒模型box-flex和flex弹性布局，网上能找到各种关于这两种布局的资料，用法也不难；

flex布局： display：flex

父节点：

.box {  display: flex;  justify-content: center;    align-items: center; // 垂直居中}

子节点

.item{    flex 1}

用法链接的资料： ； 

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}