如何用css3的box-pack和box-align属性使div里面的元素垂直居中

要使用元素固定高度的元素中垂直居中，使用css3的素的box-pack和box-align还是很方便的，

关于box-pack和box-align，目前只有webkit和moz支持，不过这也不妨碍我们在手机端使用它，首先我们先看一下这两个个属性的取值有那些

1、box-pack控制的是水平的左和右，取值有：start(居左)，center(居中)，end(居右)。

2、box-align控制的是垂直方向的上和下，取值有：start(居上)，center(居中)，end(居下)。

那么如何才能使元素垂直居中呢？

首先，我们需使用css3的弹性盒模型布局，即将外层元素的display设置为box ，其次，我们需要将这box-pack和box-align两个属性的值都设置为center就可以了。

<div class="yuan-box">
    <div>1</div>
    <div>2</div>
    <div>3</div>
</div>

.yuan-box{ 
	   width:400px; 
	   height:150px; 
	   border:2px solid #030; 
	   display:-webkit-box; 
	   display:-moz-box;
	   -webkit-box-pack:center; 
	   -webkit-box-align:center;
	   -moz-box-pack:center; 
	   -moz-box-align:center;
 }
.yuan-box div{ 
	   width:100px; 
	   height:100px; 
	   background:#600; 
	   margin:0 10px;
           color:#fff;
            font-size:50px;
 }

效果：