结合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的背景渐变Text Gradient 创建文字颜色渐变
Aug 19 HTML / CSS
CSS3利用text-shadow属性实现多种效果的文字样式展现方法
Aug 25 HTML / CSS
CSS3 Calc实现滚动条出现页面不跳动问题
Sep 14 HTML / CSS
关于HTML5的22个初级技巧(图文教程)
Jun 21 HTML / CSS
10个最常见的HTML5面试题 附答案
Jun 06 HTML / CSS
H5 canvas实现贪吃蛇小游戏
Jul 28 HTML / CSS
html5.2 dialog简介详解
Feb 27 HTML / CSS
详解px单位html5响应式方案
Mar 08 HTML / CSS
HTML5中的Web Notification桌面右下角通知功能的实现
Apr 19 HTML / CSS
video下autoplay属性无效的解决方法(添加muted属性)
May 19 HTML / CSS
5个HTML5的常用本地存储方式详解与介绍
Mar 27 HTML / CSS
css display table 自适应高度、宽度问题的解决
May 07 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数组应该有多大的分析
2009/07/30 PHP
PHP如何解决网站大流量与高并发的问题
2011/06/25 PHP
php和jquery实现地图区域数据统计展示数据示例
2014/02/12 PHP
PHP exif扩展方法开启详解
2014/07/28 PHP
PHP多线程类及用法实例
2014/12/03 PHP
php连接MSsql server的五种方法总结
2018/03/04 PHP
基于Laravel(5.4版本)的基本增删改查操作方法
2019/10/11 PHP
js 对象是否存在判断
2009/07/15 Javascript
js跑步算法的实现代码
2013/12/04 Javascript
jquery.cookie用法详细解析
2013/12/18 Javascript
JS的get和set使用示例
2014/02/20 Javascript
javascript+HTML5的canvas实现七夕情人节3D玫瑰花效果代码
2015/08/04 Javascript
详解JS中Array对象扩展与String对象扩展
2016/01/07 Javascript
React Native验证码倒计时工具类分享
2017/10/24 Javascript
JS实现显示当前日期的实例代码
2018/07/03 Javascript
利用Vue构造器创建Form组件的通用解决方法
2018/12/03 Javascript
浅谈Vue页面级缓存解决方案feb-alive(上)
2019/04/14 Javascript
Angular2使用SVG自定义图表(条形图、折线图)组件示例
2019/05/10 Javascript
JQuery事件委托原理与用法实例分析
2019/05/13 jQuery
微信小程序基于movable-view实现滑动删除效果
2020/01/08 Javascript
详解vue-flickity的fullScreen功能实现
2020/04/07 Javascript
jQuery实现鼠标拖动图片功能
2021/03/04 jQuery
[01:11:02]Secret vs Newbee 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/17 DOTA
[01:46]新英雄登场
2019/09/10 DOTA
Django中对数据查询结果进行排序的方法
2015/07/17 Python
详解Python编程中对Monkey Patch猴子补丁开发方式的运用
2016/05/27 Python
python kmeans聚类简单介绍和实现代码
2018/02/23 Python
对python Tkinter Text的用法详解
2018/10/11 Python
Python GUI自动化实现绕过验证码登录
2020/01/10 Python
幼师自我鉴定范文
2013/10/01 职场文书
自我评价如何写好?
2014/01/05 职场文书
职业规划书如何设计?
2014/01/09 职场文书
更夫岗位责任制
2014/02/11 职场文书
乔迁之喜主持词
2014/03/27 职场文书
党委书记个人对照检查材料
2014/09/15 职场文书
一文简单了解MySQL前缀索引
2022/04/03 MySQL