css3

使用盒布局的时候，可以使用box-pack属性及box-align属性来指定元素中文字、图像及子元素水平方向或垂直方向的对齐方式。使用Firefox浏览器中，需要使用-moz-box-pack、-moz-box-align的形式；在Safari、Chrom浏览器中，需要使用-webkit-box-pack、-webkit-box-align的形式。

在使用CSS 1.0或CSS 2.0的时候，在div元素内部直接放置文字的场合下，如果想让文字垂直居中，直接使用text-align属性就可以了，但若要让文字垂直居中，由于div元素是不能使用vertical-align属性的，所以就很难做到了。在CSS 3中，只要让div元素使用box-align属性（排列方向默认为horizontal）,文字就可以垂直居中了。

如图，有一个div元素，元素中有一些文字，使用box-pack属性及box-align属性让文字位于div元素正中央；

html：

<div>示例文字</div>

css：

div {      display: -moz-box;/*兼容Firefox*/      display: -webkit-box;/*兼容FSafari、Chrome*/      -moz-box-align: center;/*兼容Firefox*/      -webkit-box-align: center;/*兼容FSafari、Chrome */      -moz-box-pack: center;/*兼容Firefox*/      -webkit-box-pack: center;/*兼容FSafari、Chrome */      width: 300px;      height: 200px;      background-color: pink;}

解析：
box-pack属性及box-align属性的属性值及其含义

属性值 排列方向 box-pack属性值的含义 box-align属性值的含义 start horizontal 左对齐，文字、图像或子元素被放置在元素最左边 顶部对齐，文字、图像或子元素被放置在元素最顶部 center horizontal 中对齐，文字、图像或子元素被放置在元素中部 中部对齐，文字、图像或子元素被放置在元素中部 end horizontal 右对齐，文字、图像或子元素被放置在元素最右边 底部对齐，文字、图像或子元素被放置在元素最底部 start vertical 顶部对齐，文字、图像或子元素被放置在元素最顶部 左对齐，文字、图像或子元素被放置在元素最左边 center vertical 中部对齐，文字、图像或子元素被放置在元素中部 中对齐，文字、图像或子元素被放置在元素中部 end vertical 底部对齐，文字、图像或子元素被放置在元素最底部 右对齐，文字、图像或子元素被放置在元素最右边