css3设置box-pack和box-align让div里面的元素垂直居中


Posted in HTML / CSS onSeptember 01, 2014

以前处理垂直居中用的方法是设置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>
HTML / CSS 相关文章推荐
45个非常奇妙的CSS3 特性应用示例
Jan 01 HTML / CSS
一款css实现的鼠标经过按钮的特效
Sep 11 HTML / CSS
无需JS和jQuery代码实现CSS3鼠标浮动放大图片
Nov 21 HTML / CSS
纯css实现照片墙3D效果的示例代码
Nov 13 HTML / CSS
详解CSS3 rem(设置字体大小) 教程
Nov 21 HTML / CSS
html5如何及时更新缓存文件(js、css或图片)
Jun 24 HTML / CSS
HTML5实现文件断点续传的方法
Jan 04 HTML / CSS
iframe在移动端的缩放的示例代码
Oct 12 HTML / CSS
深入理解HTML5定时器requestAnimationFrame的使用
Dec 12 HTML / CSS
Canvas 像素处理之改变透明度的实现代码
Jan 08 HTML / CSS
AmazeUi Tree(树形结构) 应用小结
Aug 17 HTML / CSS
使用CSS实现六边形的图片效果
Aug 05 HTML / CSS
CSS3实例分享--超炫checkbox复选框和radio单选框
Sep 01 #HTML / CSS
CSS实现限制字数功能当对象内文本溢出时显示省略标记
Aug 20 #HTML / CSS
CSS3的transition和animation的用法实例介绍
Aug 20 #HTML / CSS
使用CSS3的背景渐变Text Gradient 创建文字颜色渐变
Aug 19 #HTML / CSS
css3中新增的样式使用示例附效果图
Aug 19 #HTML / CSS
css3 position fixed固定居中问题解决方案
Aug 19 #HTML / CSS
CSS3实现多背景展示效果通过CSS3定位多张背景
Aug 10 #HTML / CSS
You might like
杏林同学录(一)
2006/10/09 PHP
php下使用以下代码连接并测试
2008/04/09 PHP
PHP实现求连续子数组最大和问题2种解决方法
2017/12/26 PHP
实例讲解PHP页面静态化
2018/02/05 PHP
php实现文件上传基本验证
2020/03/04 PHP
jQuery 前的按键判断代码
2010/03/19 Javascript
使用JavaScript 实现各种跨域的方法
2013/05/08 Javascript
使用GruntJS构建Web程序之Tasks(任务)篇
2014/06/06 Javascript
推荐一款jQuery插件模板
2015/01/09 Javascript
AngularJS 与Bootstrap实现表格分页实例代码
2016/10/14 Javascript
JavaScript登录验证码的实现
2016/10/27 Javascript
重新理解JavaScript的六种继承方式
2017/03/24 Javascript
zTree获取当前节点的下一级子节点数实例
2017/09/05 Javascript
javascript高级模块化require.js的具体使用方法
2017/10/31 Javascript
ES6之模版字符串的具体使用
2018/05/17 Javascript
分享5个好用的javascript文件上传插件
2018/09/16 Javascript
Node.js安装详细步骤教程(Windows版)详解
2019/09/01 Javascript
vux-scroller实现移动端上拉加载功能过程解析
2019/10/08 Javascript
jQuery/JS监听input输入框值变化实例
2019/10/17 jQuery
vue.js click点击事件获取当前元素对象的操作
2020/08/07 Javascript
Python面向对象编程基础解析(二)
2017/10/26 Python
用Django实现一个可运行的区块链应用
2018/03/08 Python
Python中利用aiohttp制作异步爬虫及简单应用
2018/11/29 Python
canvas进阶之如何画出平滑的曲线
2018/10/15 HTML / CSS
在html页面中取得session中的值的方法
2020/08/11 HTML / CSS
英国护肤品购物网站:Beauty Expert
2016/08/19 全球购物
同学会邀请书大全
2014/01/12 职场文书
水利学院求职自荐书
2014/02/01 职场文书
初中英语课后反思
2014/04/25 职场文书
2014年科协工作总结
2014/12/09 职场文书
大学生青年志愿者活动总结
2015/05/06 职场文书
立案决定书范文
2015/06/24 职场文书
PHP对接阿里云虚拟号的实现(号码隐私保护)
2021/04/06 PHP
用position:sticky完美解决小程序吸顶问题的实现方法
2021/04/24 HTML / CSS
TV动画《政宗君的复仇》第二季制作决定PV公布
2022/04/02 日漫
JS前端可扩展的低代码UI框架Sunmao使用详解
2022/07/23 Javascript