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 相关文章推荐
使用css3绘制出各种几何图形
Aug 17 HTML / CSS
利用CSS3的transform做的动态时钟效果
Sep 21 HTML / CSS
css3 按钮 利用css3实现超酷下载按钮
Mar 18 HTML / CSS
一款利用html5和css3实现的3D滚动特效的教程
Jan 04 HTML / CSS
CSS3中HSL和HSLA的简单使用示例
Jul 14 HTML / CSS
基于CSS3制作立体效果导航菜单
Jan 12 HTML / CSS
CSS3弹性盒模型flex box快速入门心得(必看篇)
May 24 HTML / CSS
详解如何用canvas画一个微笑的表情
Mar 14 HTML / CSS
html5 兼容IE6结构的实现代码
May 14 HTML / CSS
HTML5 在canvas中绘制矩形附效果图
Jun 23 HTML / CSS
Html5自定义字体解决方法
Oct 09 HTML / CSS
AmazeUI框架搭建的方法步骤(图文)
Aug 17 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代码收集表单内容并写入文件的代码
2012/01/29 PHP
解决nginx不支持thinkphp中pathinfo的问题
2015/07/21 PHP
Zend Framework教程之Application用法实例详解
2016/03/14 PHP
JQuery页面的表格数据的增加与分页的实现
2013/12/10 Javascript
jQuery中focus事件用法实例
2014/12/26 Javascript
JQuery PHP图片在线裁剪实例
2020/07/27 Javascript
ajax分页效果(bootstrap模态框)
2017/01/23 Javascript
vue中如何引入jQuery和Bootstrap
2017/04/10 jQuery
Bootstrap table表格初始化表格数据的方法
2018/07/25 Javascript
解决ant Design中this.props.form.validateFields未执行的问题
2020/10/27 Javascript
Python批量重命名同一文件夹下文件的方法
2015/05/25 Python
Python Web框架Tornado运行和部署
2020/10/19 Python
python利用dir函数查看类中所有成员函数示例代码
2017/09/08 Python
Python装饰器简单用法实例小结
2018/12/03 Python
python 获取url中的参数列表实例
2018/12/18 Python
python模拟登陆,用session维持回话的实例
2018/12/27 Python
python里dict变成list实例方法
2019/06/26 Python
Python中最好用的命令行参数解析工具(argparse)
2019/08/23 Python
Python爬虫之urllib基础用法教程
2019/10/12 Python
python3 求约数的实例
2019/12/05 Python
Python监控服务器实用工具psutil使用解析
2019/12/19 Python
使用TensorFlow对图像进行随机旋转的实现示例
2020/01/20 Python
对Tensorflow中Device实例的生成和管理详解
2020/02/04 Python
生日邀请函范文
2014/01/13 职场文书
护士辞职信模板
2014/01/20 职场文书
2014年民政局关于保密工作整改措施
2014/09/19 职场文书
小学“向国旗敬礼”网上签名寄语活动总结
2014/09/27 职场文书
2015届大学生就业推荐表自我评价
2014/09/27 职场文书
商品陈列协议书
2014/09/29 职场文书
上课迟到检讨书300字
2014/10/15 职场文书
亚布力滑雪场导游词
2015/02/09 职场文书
新员工辞职信范文
2015/05/12 职场文书
申论不会写怎么办?教您掌握这6点思维和原则
2019/07/17 职场文书
基于Python实现一个春节倒计时脚本
2022/01/22 Python
深入解析Apache Hudi内核文件标记机制
2022/03/31 Servers