您的位置：首页 > Web前端 > CSS

css3中通过设置box-pack和box-align让div里面的各种元素垂直和水平居中的方法

2017-06-21 10:36 676 查看

css3中通过设置box-pack和box-align让div里面的各种元素居中的方法分享：

大家以前处理垂直居中用的方法是设置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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航