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 3D位移translate效果实例介绍
May 03 HTML / CSS
css3发光搜索表单分享
Apr 11 HTML / CSS
CSS实现的一闪而过的图片闪光效果
Apr 23 HTML / CSS
CSS3 中的@keyframes介绍
Sep 02 HTML / CSS
CSS3中Animation动画属性用法详解
Jul 04 HTML / CSS
CSS3 box-sizing属性详解
Nov 15 HTML / CSS
css3实现蒙版弹幕功能
Jun 18 HTML / CSS
css3利用transform变形结合事件完成扇形导航
Oct 26 HTML / CSS
CSS3 实现飘动的云朵动画
Dec 01 HTML / CSS
HTML5 input元素类型:email及url介绍
Aug 13 HTML / CSS
HTML5 CSS3打造相册效果附源码下载
Jun 16 HTML / CSS
如何在CSS中绘制曲线图形及展示动画
May 24 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
javascript 常用功能总结
2012/03/18 Javascript
JQuery拖拽元素改变大小尺寸实现代码
2012/12/10 Javascript
Extjs优化(二)Form表单提交通用实现
2013/04/15 Javascript
js中return false(阻止)的用法
2013/08/14 Javascript
鼠标经过tr时,改变tr当前背景颜色
2014/01/13 Javascript
七个很有意思的PHP函数
2014/05/12 Javascript
js+css实现tab菜单切换效果的方法
2015/01/20 Javascript
JavaScript生成SQL查询表单的方法
2015/08/13 Javascript
js轮播图代码分享
2016/07/14 Javascript
node.js + socket.io 实现点对点随机匹配聊天
2017/06/30 Javascript
phantomjs导出html到pdf的方法总结
2017/10/19 Javascript
Node.js笔记之process模块解读
2018/05/31 Javascript
vue-router重定向不刷新问题的解决
2018/06/25 Javascript
vue 刷新之后 嵌套路由不变 重新渲染页面的方法
2018/09/13 Javascript
javascript中数组的常用算法深入分析
2019/03/12 Javascript
浅谈JavaScript面向对象--继承
2019/03/20 Javascript
vue如何截取字符串
2019/05/06 Javascript
layui2.0使用table+laypage实现真分页
2019/07/27 Javascript
React+Redux实现简单的待办事项列表ToDoList
2019/09/29 Javascript
Vue 一键清空表单的实现方法
2020/02/07 Javascript
[00:48]食人魔魔法师至宝“金鹏之幸”全新模型和自定义特效展示
2019/12/19 DOTA
Python与shell的3种交互方式介绍
2015/04/11 Python
Django返回json数据用法示例
2016/09/18 Python
利用Python自带PIL库扩展图片大小给图片加文字描述的方法示例
2017/08/08 Python
Java及python正则表达式详解
2017/12/27 Python
python学习入门细节知识点
2018/03/29 Python
Python内存管理实例分析
2019/07/10 Python
Python requests设置代理的方法步骤
2020/02/23 Python
selenium携带cookies模拟登陆CSDN的实现
2021/01/19 Python
html5版canvas自由拼图实例
2014/10/15 HTML / CSS
酷瑞网络科技面试题
2012/03/30 面试题
事业单位个人应聘自荐信
2013/09/21 职场文书
社会公德演讲稿
2014/05/20 职场文书
企业理念标语
2014/06/09 职场文书
工程承包协议书
2014/10/20 职场文书
css3 选择器
2022/05/11 HTML / CSS