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 相关文章推荐
使用Filters滤镜弥补CSS3的跨浏览器问题以及兼容低版本IE
Jan 23 HTML / CSS
css3实现input输入框颜色渐变发光效果代码
Apr 02 HTML / CSS
CSS3制作漂亮的照片墙的实现代码
Jun 08 HTML / CSS
使用CSS3制作版头动画效果
Dec 24 HTML / CSS
HTML5地理定位与第三方工具百度地图的应用
Nov 17 HTML / CSS
HTML5中FileReader接口使用方法实例详解
Aug 26 HTML / CSS
html5使用canvas绘制太阳系效果
Dec 15 HTML / CSS
HTML5+CSS3绘制锯齿状的矩形
Mar 01 HTML / CSS
使用phonegap获取设备的一些信息方法
Mar 31 HTML / CSS
使用数据结构给女朋友写个Html5走迷宫游戏
Nov 26 HTML / CSS
如何在Canvas上的图形/图像绑定事件监听的实现
Sep 16 HTML / CSS
详解CSS3.0(Cascading Style Sheet) 层叠级联样式表
Jul 16 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
PHP 多维数组排序实现代码
2009/08/05 PHP
linux下php上传文件注意事项
2016/06/11 PHP
PHP实现的字符串匹配算法示例【sunday算法】
2017/12/19 PHP
php7 图形用户界面GUI 开发示例
2020/02/22 PHP
javascript 图片上传预览-兼容标准
2009/06/01 Javascript
js实现addClass,removeClass,hasClass的函数代码
2011/07/13 Javascript
解析John Resig Simple JavaScript Inheritance代码
2012/12/03 Javascript
JS实现商品倒计时实现代码
2013/05/03 Javascript
jquery实现隐藏与显示动画效果/输入框字符动态递减/导航按钮切换
2013/07/01 Javascript
Javascript中的getUTCDay()方法使用详解
2015/06/10 Javascript
CSS图片响应式 垂直水平居中
2015/08/14 Javascript
JS模拟Dialog弹出浮动框效果代码
2015/10/16 Javascript
JS中JSON对象和String之间的互转及处理技巧
2016/04/06 Javascript
JavaScript事件代理和委托详解
2016/04/08 Javascript
利用JQuery直接调用asp.net后台的简单方法
2016/10/27 Javascript
js解决软键盘遮挡输入框的问题分享
2017/12/19 Javascript
js最简单的双向绑定实例讲解
2018/01/02 Javascript
JS判断两个数组或对象是否相同的方法示例
2019/02/28 Javascript
如何为你的JS项目添加智能提示与类型检查详解
2019/03/12 Javascript
微信小程序代码上传、审核发布小程序
2019/05/18 Javascript
js prototype和__proto__的关系是什么
2019/08/23 Javascript
ES6 Promise对象概念及用法实例详解
2019/10/15 Javascript
Vue(定时器)解决mounted不能获取到data中的数据问题
2020/07/30 Javascript
不依任何赖第三方,单纯用vue实现Tree 树形控件的案例
2020/09/21 Javascript
[49:17]DOTA2-DPC中国联赛 正赛 Phoenix vs Dynasty BO3 第三场 1月26日
2021/03/11 DOTA
Python实现测试磁盘性能的方法
2015/03/12 Python
Python数据结构与算法之图结构(Graph)实例分析
2017/09/05 Python
用python编写第一个IDA插件的实例
2018/05/29 Python
python ftp 按目录结构上传下载的实现代码
2018/09/12 Python
python函数与方法的区别总结
2019/06/23 Python
django表单的Widgets使用详解
2019/07/22 Python
使用tqdm显示Python代码执行进度功能
2019/12/08 Python
使用SQLAlchemy操作数据库表过程解析
2020/06/10 Python
维多利亚的秘密官方旗舰店:VICTORIA’S SECRET
2018/04/02 全球购物
后勤服务中心总经理工作职责
2014/03/03 职场文书
docker compose 部署 golang 的 Athens 私有代理问题
2022/04/28 Servers