CSS 3新增的box-pack属性和box-align属性，分别用于定义盒元素内部水平对齐方式和垂直对齐方式。这种对齐方式，对盒元素内部的文字、图像及子元素都是有效的。基于webkit内核的替代私有属性是-webkit-box-pack和-webkit-box-align，基于gecko内核的替代私有属性是-moz-box-pack和-moz-box-align。
1. 参数说明
box-pack属性可设置子元素在水平方向上的对齐方式，其语法如下：
广州网站设计
- box-pack : start | end | center | justify;
取值说明如下。
start：默认值，表示所有的子元素都显示在盒元素的左侧，额外的空间显示在盒元素右侧。
end：表示所有的子元素都显示在盒元素的右侧，额外的空间显示在盒元素左侧。
center：表示所有的子元素居中显示，额外的空间平均分配在两侧。
justify：表示所有的子元素散开显示，额外的空间在子元素之间平均分配，在第一个子元素之前和最后一个子元素之后不分配空间。
box-align属性可设置子元素在垂直方向上的对齐方式，其语法如下：
广州网站设计
- box-align : start | end | center | baseline | stretch;
取值说明如下。
start：表示所有的子元素都显示在盒元素的顶部，额外的空间显示在盒元素底部。
end：表示所有的子元素都显示在盒元素的底部，额外的空间显示在盒元素顶部。
center：表示所有的子元素垂直居中显示，额外的空间平均分配在盒元素的上下两侧。
baseline：表示所有的子元素沿着基线显示。
stretch：默认值，表示每个子元素的高度被拉伸到适合的盒元素高度。
提示：box-pack属性和box-align属性仅在盒布局模式下使用。在传统的对齐方式中，有text-align属性和vertical-align属性分别定义元素内的水平方向对齐和垂直方向对齐，但不宜用于盒布局。
2. 自适应居中
在CSS 2.0时代，把元素布局在页面的正中央，是难以通过CSS样式表实现的，通常会借助JavaScript技术来实现，需要写大量代码，还会遇到兼容性问题。下面我们借助box-pack属性和box-align属性，把一个对话框布局在页面中央。
【示例4-7】 自适应居中的登录框。
广州网站建设
- <!DOCTYPE HTML>
- <html>
- <head>
- <meta charset="utf-8">
- <title>自适应居中的登录框</title>
- <style type="text/css">
- body, html {
- margin:0;
- padding:0;
- height:100%;
- }
- #box {
- width:100%;
- height:100%;
- background:url(images/sky.jpg) no-repeat 0 0;
- background-size:100% 100%;
- /* 开启盒布局 */
- display:-webkit-box;
- display:-moz-box;
- display:box;
- /* 水平居中 */
- -webkit-box-pack:center;
- -moz-box-pack:center;
- box-pack:center;
- /* 垂直居中 */
- -webkit-box-align:center;
- -moz-box-align:center;
- box-align:center;
- }
- #box div {
- opacity:0.8;
- }
- </style>
- <body>
- <div id="box">
- <div><img src="images/login.png" /></div>
- </div>
- </body>
- </html>
广州网站建设
