CSS3 box-pack 属性

对div中的子元素同时使用box-align和box-pack的居中属性：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <style>
    div {
      width: 350px;
      height: 100px;
      border: 1px solid black;

      /* Internet Explorer 10 */
      display: -ms-flexbox;
      -ms-flex-pack: center;
      -ms-flex-align: center;

      /* 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;
    }
  </style>
</head>
<body>

  <div>
    <p>Center me!</p>
  </div>

  <p><b>注意:</b> Flexible boxes 在 IE 9和更早版本的浏览器中不兼容</p>
</body>
</html>

尝试一下 »

浏览器支持

Internet ExplorerFirefoxOperaGoogle ChromeSafari

目前主流浏览器都不支持box-pack属性。

Internet Explorer 10 使用 -ms-flex-pack property 属性来代替支持。

Firefox通过私有属性- MOZ-box-pack支持。

Safari, Opera, 和 Chrome 通过私有属性 -webkit-box-pack 支持.

注意： Internet Explorer 9及更早IE版本不支持弹性框.

属性定义及使用说明

box-pack属性指定一个box的子元素时，被置于该框的子元素小于该框。

此属性指定横向框的水平位置，垂直位置的垂直框。

默认值: start
继承: no
版本: CSS3
JavaScript 语法: object.style.boxPack="center"

语法

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

值 说明
start 对于普通方向的boxes，左边缘的第一个子元素被放置在左侧（所有额外的空间放置后的最后一个子元素）。对于反向boxes，右边缘最后一个子元素放置在右侧（所有额外的空间放置前的第一个子元素）
end 对于正常的方向的boxes，最后一个子元素的右边缘放置在右侧（所有额外的空间放置前的第一个子元素）。对于反向boxes，第一个孩子的左边缘放置在左侧（所有额外的空间放置后的最后一个子元素）
center 额外的空间划分均匀的两半，前一半放置第一个子元素，另一半放置最后一个子元素
justify 额外的空间平均分配给每个子元素