CSS3中不熟悉的属性1：box-pack和box-align

box-pack 定义和用法：

box-pack 属性规定当框大于子元素的尺寸，在何处放置子元素。

该属性规定水平框中的水平位置，以及垂直框中的垂直位置。

语法：

box-pack: start|end|center|justify;

start:

对于正常方向的框，首个子元素的左边缘被放在左侧（最后的子元素后是所有剩余的空间）

对于相反方向的框，最后子元素的右边缘被放在右侧（首个子元素前是所有剩余的空间）

end:

对于正常方向的框，最后子元素的右边缘被放在右侧（首个子元素前是所有剩余的空间）。

对于相反方向的框，首个子元素的左边缘被放在左侧（最后子元素后是所有剩余的空间）。

center:

均等地分割多余空间，其中一半空间被置于首个子元素前，另一半被置于最后一个子元素后

justify:

在每个子元素之间分割多余的空间（首个子元素前和最后一个子元素后没有多余的空间）。

box-align属性与box-pack类似,规定如何对齐框的子元素。

语法：

box-align: start|end|center|baseline|stretch;

start ：

对于正常方向的框，每个子元素的上边缘沿着框的顶边放置。

对于反方向的框，每个子元素的下边缘沿着框的底边放置。

end：

对于正常方向的框，每个子元素的下边缘沿着框的底边放置。

对于反方向的框，每个子元素的上边缘沿着框的顶边放置。

center：

均等地分割多余的空间，一半位于子元素之上，另一半位于子元素之下。

baseline：

如果 box-orient 是inline-axis或horizontal，所有子元素均与其基线对齐。

stretch：

拉伸子元素以填充包含块

通过一起使用 box-align 和 box-pack 属性，对 div 框的子元素进行居中

<div>
<p>我是居中对齐的。</p>
</div>

div
{
width:350px;
height:100px;
border:1px solid black;

/* Firefox */
display:-moz-box;
-moz-box-pack:center;
-moz-box-align:center;

/* Safari, Chrome, and Opera */
display:-webkit-box;
-webkit-box-pack:center;
-webkit-box-align:center;

/* W3C */
display:box;
box-pack:center;
box-align:center;
}