弹性盒模型
注意在使用弹性盒模型的时候 父元素必须要加display: box或display: inline-box
box-orient 定义盒模型的布局方向（写在父元素上 ）
Horizontal 水平显示（默认）
vertical 垂直方向
box-direction 元素排列顺序（写在父元素上 ）
Normal 正序（默认）
Reverse 反序
box-ordinal-group 设置元素的具体位置
box-flex 定义盒子的弹性空间
子元素的尺寸 = 盒子的尺寸 * 子元素的box-flex属性值 / 所有子元素的box-flex属性值的和
box-pack 对盒子富裕的空间进行管理（水平方向）
start 所有子元素在盒子左侧显示，富裕空间在右侧
end 所有子元素在盒子右侧显示，富裕空间在左侧
center 所有子元素居中
justify 富余空间在子元素之间
box-align 在垂直方向上对元素的位置进行管理（垂直方向）
start 所有子元素在据顶
end 所有子元素在据底
center 所有子元素居中
问：未知宽高的块元素如何在屏幕中水平垂直居中？（请看以下代码）
css
*{ padding: 0; margin: 0; } html, body{ height: 100%; } .box{ height: 100%; font-size:20px; color: #fff; display: -webkit-box; -webkit-box-pack: center; -webkit-box-align: center; } .box div{ width: 100px; height: 100px;background: red; border: 1px solid #fff; }
html
<div class="box"> <div>1</div> <div>2</div> <div>3</div> </div>