要使用元素固定高度的元素中垂直居中,使用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>
css:
.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;
 }

效果:

1
2
3