选对事业可以成就一生，选对朋友可以智能一生，选对环境可以快乐一生，选对伴侣可以幸福一生，选对生活方式可以健康一生。
以前处理垂直居中用的方法是设置div的height和line-height是一样的值，现在就不用那么麻烦了。只要设置元素的box-pack和box-align即可，这两个属性当前只有webkit和moz支持。其中box-pack控制的是水平的左和右，取值有：start(居左)，center(居中)，end(居右)。box-align的取值有：start(居上)，center(居中)，end(居下)。如果我们要设置垂直居中的话只需要将这两个属性的值都设置为center即可。当然了，这个前提是使用css3的盒布局，即将外层元素的display设置为box 复制代码
代码如下:<style type="text/css">
#container{
display: box;
display: -webkit-box;
display: -moz-box;
width:800px;
height: 200px;
border: 1px solid #ccc;
-webkit-box-pack:center;
-moz-box-pack:center;
-webkit-box-align:center;
-moz-box-align:center;
}
#div1{
background: orange;
}
#div2{
background: yellow;
}
#div3{
background: green;
}
</style>
</head>
<body>
<div id="container">
<div id="div1">列1</div>
<div id="div2">列2</div>
<div id="div3">列3</div>
</div>
</body>
到此这篇关于css3设置box-pack和box-align让div里面的元素垂直居中就介绍到这了。无论你有多少朋友，不能少了书这个诤友。更多相关css3设置box-pack和box-align让div里面的元素垂直居中内容请查看相关栏目，小编编辑不易，再次感谢大家的支持！
![CSS3如何实现超酷的黑猫警长首页]("images/cat1.png)
![CSS如何解决页面图片水平垂直居中问题的方法]("images/img1.jpg)
![css如何实现悬浮效果的阴影的方法示例]("img/back.png)
![css3旋转木马]("img/1.jpg)
