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;
}