當彈性元素與非彈性元素混合排版時，有可能會出現所有子元素的尺寸大於或小於盒子的尺寸，從而出現盒子空間不足或者富余的情況。這時就需要一種方法來管理盒子的空間。如果子元素的總尺寸小於盒子的尺寸，則可以使用box-align和box-pack屬性進行管理。
CSS3新增的box-pack屬性和box-align屬性，分別用於定義盒元素內部“子元素”的水平方向和垂直方向上的富余空間管理方式。這些對齊方式，對盒元素內部的文字、圖形以及子元素都是有效的。
box-pack屬性可以在水平方向上對盒子的富余空間進行管理。
語法：
box-pack:取值;
說明：
box-pack屬性取值如下：
box-align屬性可以在垂直方向上對盒子的富余空間進行管理。
語法：
box-align:取值;
說明：
box-align屬性取值如下：
在CSS2中，如果想要讓文字垂直居中，往往都是設置height屬性值等於line-height屬性值 ，不過學習了這一節，我們只要讓div元素使用box-align屬性（排列方向默認為horizontal），文字就可以垂直居中了。
舉例1：文字自適應居中（包括垂直居中和水平居中）
在線測試
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>盒子內部對齊box-pack屬性與box-align屬性</title>
<style type="text/css">
div
{
width:200px;
height:160px;
display:-webkit-box;
-webkit-box-align:center;
-webkit-box-pack:center;
background-color:pink;
}
</style>
</head>
<body>
<div> 學習網</div>
</body>
</html>
在浏覽器預覽效果如下：
分析：
如果想要實現“無論元素高度如何改變，文字都能垂直居中”的自適應高度的話，假如我們使用“height屬性值等於line-height屬性值”的方法，就不可能實現了。但是使用box-pack和box-align屬性卻能夠輕松實現。
大家可以在“在線代碼測試”中自行修改div元素高度，會發現：無論高度如何變化，文字都能垂直居中。
上面這種方法，不僅可以實現單行文字居中，還可以實現多行文字居中，大家可以嘗試一下！
舉例2：圖片自適應居中（包括垂直居中和水平居中）
在線測試
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>盒子內部對齊box-pack屬性與box-align屬性</title>
<style type="text/css">
#control
{
margin-bottom:10px;
}
#view
{
width:160px;
height:100px;
display:-webkit-box;
-webkit-box-orient:horizontal;
-webkit-box-align:center;
-webkit-box-pack:center;
border:1px solid silver;
}
</style>
<script src="jquery-1.11.3.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$("#range_width").change(function () {
var num = $(this).val();
$("#value_width").text(num + "px");
$("#view").css("width", num + "px");
});
$("#range_height").change(function () {
var num = $(this).val();
$("#value_height").text(num + "px");
$("#view").css("height", num + "px");
});
})
</script>
</head>
<body>
<div id="control">
寬度：<input id="range_width" type="range" min="160" max="320" value="160"/><span id="value_width">160px</span><br />
高度：<input id="range_height" type="range" min="100" max="240" value="100"/><span id="value_height">100px</span>
</div>
<div id="view"><img src="../App_images/lesson/run_css3/css3.png" alt=""/></div>
</body>
</html>
在浏覽器預覽效果如下：
分析：
其實圖片的自適應居中，跟文字的自適應居中是一樣的。我們只需要使用“display:box”定義外層元素為彈性盒子模型，然後使用“box-pack:center;”和“box-align:center;”即可。
以後凡是遇到自適應居中問題，我們都可以嘗試使用以上方法來解決，非常好的一個方法。其實，對於box-pack屬性和box-align屬性，基本掌握center這個屬性值就行了，其他屬性值用得不多，因此不在此啰嗦講解。如果你想要深入了解，請自行找度娘。