这里记录了垂直居中有几种方式：http://james.gameover.com/index.php/2009/vertically-centring-in-css-without-hacks-and-multi-line-enabled/

下面要说的是利用CSS3的弹性盒模型及相关属性制作的一个水平和垂直方式居中的例子。
代码结构如图：

CSS代码：

实现方式非常简单：
1.整体的外表块元素显示方式为弹性方框
2.框的子代水平排列
3.box-pack和box-align是设置框子元素在框内的排列方式
 
由于div的子元素是水平排列的，所以box-pack设置的是水平方向上子元素的排列方式，这里为center也就是水平居中。而box-align设置的就是垂直方式。
这样就构造了一个块，其内部水平和垂直都居中 。
 
效果图：