css3设置box-pack和box-align让div里面的元素垂直居中

以往实现垂直居中的方法是通过设定div的高度和行高相同，现在有了新的方式，更加简便。只需设置元素的box-pack和box-align属性即可。这两个属性目前主要由webkit和moz支持。

其中，box-pack属性主要负责水平方向的布局，可以让内容在水平方向上居左、居中或居右。它的取值包括：start（居左）、center（居中）和end（居右）。而box-align属性则控制垂直方向的布局，可以让内容在垂直方向上居上、居中或居下。若想要实现垂直居中，只需将这两个属性的值都设定为center即可。

这一方法的前提是利用css3的盒布局，需要将外层元素的display属性设置为box。以下是相应的代码示例：

```html

```

在这段代码中，我们创建了一个名为container的div，其内部包含了三个子div，分别被赋予了不同的背景色。通过设置box-pack和box-align属性为center，我们实现了这三个子div在container中的垂直居中。这种方法使得布局更加灵活和简洁。