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线性渐变简单实现以及该属性在浏览器中的不同
Dec 12 HTML / CSS
用css3实现当鼠标移进去时当前亮其他变灰效果
Apr 08 HTML / CSS
CSS中的字体大小设置属性总结
May 24 HTML / CSS
CSS3自定义滚动条样式的示例代码
Aug 21 HTML / CSS
10分钟理解CSS3 Grid布局
Dec 20 HTML / CSS
HTML5打开本地app应用的方法
Mar 31 HTML / CSS
简单html5代码获取地理位置
Mar 31 HTML / CSS
HTML5中5个简单实用的API(第二篇,含全屏、可见性、拍照、预加载、电池状态)
May 07 HTML / CSS
浅谈Html5多线程开发之WebWorkers
May 02 HTML / CSS
Html5跳转到APP指定页面的实现
Jan 14 HTML / CSS
HTML5 body设置全屏背景图片的示例代码
Dec 08 HTML / CSS
HTML中table表格拆分合并(colspan、rowspan)
Apr 07 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-cli简介(不会Shell语言一样用Shell)
2013/06/03 PHP
ThinkPHP模板自定义标签使用方法
2014/06/26 PHP
用php+ajax新建流程(请假、进货、出货等)
2017/06/11 PHP
jQuery对象与DOM对象之间的转换方法
2010/04/15 Javascript
jquery focus(fn),blur(fn)方法实例代码
2011/12/16 Javascript
jQuery操作input值的各种方法总结
2013/11/21 Javascript
JavaScript的各种常见函数定义方法
2014/09/16 Javascript
jQuery学习心得总结(必看篇)
2016/06/10 Javascript
深入浅析search 搜索框的写法
2016/08/02 Javascript
完美解决JS文件页面加载时的阻塞问题
2016/12/18 Javascript
使用InstantClick.js让页面提前加载200ms
2017/09/12 Javascript
图片加载完成再执行事件的实例
2017/11/16 Javascript
JS使用贪心算法解决找零问题示例
2017/11/27 Javascript
深入浅析vue组件间事件传递
2017/12/29 Javascript
对Angular中单向数据流的深入理解
2018/03/31 Javascript
微信小程序实现人脸识别登陆的示例代码
2019/04/02 Javascript
vue中echarts引入中国地图的案例
2020/07/28 Javascript
[49:35]LGD vs OG 2018国际邀请赛淘汰赛BO3 第二场 8.25
2018/08/29 DOTA
Python查找函数f(x)=0根的解决方法
2015/05/07 Python
详解Python中heapq模块的用法
2016/06/28 Python
Python实现判断一个字符串是否包含子串的方法总结
2017/11/21 Python
Python Socket使用实例
2017/12/18 Python
Python将图片转换为字符画的方法
2020/06/16 Python
利用Pandas 创建空的DataFrame方法
2018/04/08 Python
django 解决manage.py migrate无效的问题
2018/05/27 Python
Python学习笔记之文件的读写操作实例分析
2019/08/07 Python
使用django和vue进行数据交互的方法步骤
2019/11/11 Python
python使用numpy实现直方图反向投影示例
2020/01/17 Python
Python可变对象与不可变对象原理解析
2020/02/25 Python
如何用python处理excel表格
2020/06/09 Python
新春寄语大全
2014/04/09 职场文书
师德培训心得体会2016
2016/01/09 职场文书
九不准学习心得体会
2016/01/23 职场文书
银行求职信怎么写
2019/06/20 职场文书
图文详解Nginx版本平滑升级方案
2021/09/15 Servers
六个好看实用的 HTML + CSS 后台登录入口页面
2022/04/28 HTML / CSS