结合CSS3的新特性来总结垂直居中的实现方法


Posted in HTML / CSS onMay 30, 2016

0.单行内容的居中
只考虑单行是最简单的,无论是否给容器固定高度,只要给容器设置 line-height 和 height,并使两值相等,再加上 over-flow: hidden 就可以了

CSS Code复制内容到剪贴板
  1. .middle-demo-1{   
  2. height: 4em;   
  3. line-height: 4em;   
  4. overflowhidden;   
  5. }  

优点:
(1). 同时支持块级和内联极元素
(2). 支持所有浏览器
缺点:
(1). 只能显示一行
(2). IE中不支持<img>等的居中
要注意的是:
(1). 使用相对高度定义你的 height 和 line-height
(2). 不想毁了你的布局的话,overflow: hidden 一定要
为什么?
请比较以下两个例子:

XML/HTML Code复制内容到剪贴板
  1. <p style="background: #900; color: #00f; font: bold 12px/24px Helvertica,Arial,sans-serif; height:24px; width:370px;">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>  
  2. <br/>  
  3. <br/>  
  4. <p style="background: #090; color: #00f; font: bold 12px/2em Helvertica,Arial,sans-serif; height:2em; width:370px; overflow: hidden;">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>  

上一个高度是用的绝对单位px,并且没有隐藏溢出,下一个高度用的单位是相对单位em,并且隐藏了溢出。如果你的浏览器支持放大字体,那么尽情地放大字体,看看会出现什么效果。

1.使用position:absolute(fixed),设置left、top、margin-left、margin-top的属性;

CSS Code复制内容到剪贴板
  1. .box{   
  2.     position:absolute;/*或fixed*/  
  3.     top:50%;   
  4.     left:50%;   
  5.     margin-top:-100px;   
  6.     margin-left:-200px;   
  7. }  

2.利用position:fixed(absolute)属性,margin:auto这个必须不要忘记了;

CSS Code复制内容到剪贴板
  1. .box{   
  2.     positionabsolute;或fixed  
  3.     top:0;   
  4.     rightright:0;   
  5.     bottombottom:0;   
  6.     left:0;   
  7.     marginauto;   
  8. }  

3.利用display:table-cell属性使内容垂直居中;

CSS Code复制内容到剪贴板
  1. .box{   
  2.   
  3. display:table-cell;   
  4.   
  5. vertical-align:middle;   
  6.   
  7. text-align:center;   
  8.   
  9. width:120px;   
  10.   
  11. height:120px;   
  12.   
  13. background:purple;   
  14.   
  15. }  

4.使用css3的新属性transform:translate(x,y)属性;

CSS Code复制内容到剪贴板
  1. .box{   
  2.     positionabsolute;   
  3.     transform: translate(50%,50%);   
  4.     -webkit-transform:translate(50%,50%);   
  5.     -moz-transform:translate(50%,50%);   
  6.     -ms-transform:translate(50%,50%);   
  7. }  

5.最高大上的一种,使用:before元素;

CSS Code复制内容到剪贴板
  1. .box{   
  2.   
  3. position:fixed;   
  4.   
  5. display:block;   
  6.   
  7. background:rgba(0,0,0,.5);   
  8.   
  9. }   
  10.   
  11. .box:before{   
  12.   
  13. content:'';   
  14.   
  15. display:inline-block;   
  16.   
  17. vertical-align:middle;   
  18.   
  19. height:100%;   
  20.   
  21. }   
  22.   
  23. .box.content{   
  24.   
  25. width:60px;   
  26.   
  27. height:60px;   
  28.   
  29. line-height:60px;   
  30.   
  31. color:red;  

6.Flex布局;

CSS Code复制内容到剪贴板
  1. .box{   
  2.     display: -webkit-box;   
  3.     display: -webkit-flex;   
  4.     display: -moz-box;   
  5.     display: -moz-flex;   
  6.     display: -ms-flexbox;   
  7.     display: flex;   
  8.     水平居中   
  9.     -webkit-box-align: center;   
  10.     -moz-box-align: center;   
  11.     -ms-flex-pack:center;   
  12.     -webkit-justify-contentcenter;   
  13.     -moz-justify-contentcenter;   
  14.     justify-contentcenter;   
  15.      垂直居中    
  16.     -webkit-box-pack: center;   
  17.     -moz-box-pack: center;   
  18.     -ms-flex-align:center;   
  19.     -webkit-align-items: center;   
  20.     -moz-align-items: center;   
  21.     align-items: center;   
  22. }  
HTML / CSS 相关文章推荐
CSS3教程:新增加的结构伪类
Apr 02 HTML / CSS
一款纯css3实现的响应式导航
Oct 31 HTML / CSS
使用css3实现的tab选项卡代码分享
Dec 09 HTML / CSS
CSS3+JavaScript实现炫酷呼吸效果的示例代码
Jun 15 HTML / CSS
CSS3实现的渐变幻灯片效果
Dec 07 HTML / CSS
使用纯HTML5编写一款网页上的时钟的代码分享
Nov 16 HTML / CSS
HTML5事件方法全部汇总
May 12 HTML / CSS
HTML5 常见面试题之PC端和移动端区别介绍
Jan 22 HTML / CSS
快速创建 HTML5 Canvas 电信网络拓扑图的示例代码
Mar 21 HTML / CSS
Canvas实现贝赛尔曲线轨迹动画的示例代码
Apr 25 HTML / CSS
Html5实现首页动态视频背景的示例代码
Sep 25 HTML / CSS
wordpress添加Html5的表单验证required方法小结
Aug 18 HTML / CSS
图解CSS3制作圆环形进度条的实例教程
May 26 #HTML / CSS
CSS中的字体大小设置属性总结
May 24 #HTML / CSS
CSS3弹性盒模型flex box快速入门心得(必看篇)
May 24 #HTML / CSS
轻松掌握CSS3中的字体大小单位rem的使用方法
May 24 #HTML / CSS
CSS3中的Media Queries学习笔记
May 23 #HTML / CSS
详解CSS3的perspective属性设置3D变换距离的方法
May 23 #HTML / CSS
CSS3中设置3D变形的transform-style属性详解
May 23 #HTML / CSS
You might like
PHP 文件上传后端处理实用技巧方法
2017/01/06 PHP
JS中批量给元素绑定事件过程中的相关问题使用闭包解决
2013/04/15 Javascript
Javascript实现滚动图片新闻的实例代码
2013/11/27 Javascript
禁止IE用右键的JS代码
2013/12/30 Javascript
node.js中的fs.appendFile方法使用说明
2014/12/17 Javascript
javascript实现3D切换焦点图
2015/10/16 Javascript
全系IE支持Bootstrap的解决方法
2015/10/19 Javascript
jQuery无刷新分页完整实例代码
2015/10/27 Javascript
JS验证邮件地址格式方法小结
2015/12/01 Javascript
jquery实现表格中点击相应行变色功能效果【实例代码】
2016/05/09 Javascript
jQuery如何跳转到另一个网页 就这么简单
2016/12/28 Javascript
详解Vue中过度动画效果应用
2017/05/25 Javascript
Three.js实现绘制字体模型示例代码
2017/09/26 Javascript
jQuery实现滚动效果
2017/11/17 jQuery
vue项目中导入swiper插件的方法
2018/01/30 Javascript
说说如何在Vue.js中实现数字输入组件的方法
2019/01/08 Javascript
小程序实现背景音乐播放和暂停
2020/06/19 Javascript
react-intl实现React国际化多语言的方法
2020/09/27 Javascript
[56:58]VP vs Optic 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
python实现JAVA源代码从ANSI到UTF-8的批量转换方法
2015/08/10 Python
python版本的读写锁操作方法
2016/04/25 Python
关于Python 3中print函数的换行详解
2017/08/08 Python
Python根据欧拉角求旋转矩阵的实例
2019/01/28 Python
Python 字符串、列表、元组的截取与切片操作示例
2019/09/17 Python
python 数据库查询返回list或tuple实例
2020/05/15 Python
Keras 利用sklearn的ROC-AUC建立评价函数详解
2020/06/15 Python
深入了解Python 变量作用域
2020/07/24 Python
css3中检验表单的required,focus,valid和invalid样式
2014/02/21 HTML / CSS
L’Artisan Parfumeur官网:法国香水品牌
2020/08/11 全球购物
创业者是否需要商业计划书?
2014/02/07 职场文书
超市中秋节活动方案
2014/02/12 职场文书
教育项目合作协议书格式
2014/10/17 职场文书
民主评议党员登记表自我评价
2014/10/20 职场文书
任长霞观后感
2015/06/16 职场文书
MySQL 分组查询的优化方法
2021/05/12 MySQL
vue如何批量引入组件、注册和使用详解
2021/05/12 Vue.js