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

来源：互联网发布：百度云域名编辑：程序博客网时间：2024/06/06 20:52

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

代码如下:

#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>

</body>

阅读全文

1 0