一、水平居中

方法① :行内元素 (父元素)text-align,(子元素)inline-block

.parent{text-align: center;}
.child{display: inline-block;}
总结:

优点:兼容性好,支持低版本浏览器

缺点:需要同时在父元素和子元素上设置

适用场景:子元素数量少(或只有一个),并且需要兼容低版本浏览器时使用,不受float影响
 
方法②:块状元素   使用margin:0 auto来实现
.child{width:200px;margin:0 auto;} 

优点:兼容性好

缺点:需要指定宽度

前提:用于子元素上,不受float影响

方法③:(子元素)display:table;margin:0 auto;

.child{display:table;margin:0 auto;} 

优点:只需要对自身进行设置

缺点:不兼容IE6和IE7

适用场景:子元素数量多,不方便修改父元素的属性,对浏览器版本要求相对较低时使用

方法④:绝对定位实现 (父元素)position:relative,(子元素)absolute+left+transform(translateX(-50%))

.parent{position:relative;}
/*或者实用margin-left的负值为盒子宽度的一半也可以实现,不过这样就必须知道盒子的宽度,但兼容性好*/
.child{position:absolute;left:50%;transform:translate(-50%);}
优点:不影响其他元素
缺点:transform兼容性,IE9及以上可用

方法⑤:flex+justify-content/margin

/*第一种方法*/
.parent{display:flex;justify-content:center;}
/*第二种方法*/
.parent{display:flex;}
.child{margin:0 auto;}

第一种方法:

优点:只设parent
缺点:flex兼容性差,而且比较耗资源

第二种方法:

优点:代码简单
缺点:污染父元素,flex兼容性问题,如果进行大面积的布局可能会影响效率

二、垂直居中

方法① :单行文本 设置line-height等于父元素高度

.child{ height:20px; line-height:20px} 
优点:代码简单
缺点:只适合一行文本,多行文本则不可以
这是一种很流行的方法, 也适应IE7.
 
方法② :行内块级元素  使用display:inline-block; vertical-align:middle;
.child{display:inline-block; vertical-align:middle}
.parent:after{display:inline-block; vertical-align:middle}

方法 :块级元素 使用vertical-align的时候,由于对齐的基线是用行高的基线作为标记,故需要设置line-height或设置display:table-cell;

/*第一种方法*/
.parent{display:table-cell;vertical-align:middle;height:20px;}
/*第二种方法*/
.parent{display:inline-block;vertical-align:middle;line-height:20px;}
优点:兼容性比较好,换成table可以兼容IE6,7
缺点:table-cell不能和float、position:absolute同时设置。(只能在外parent外套一层div.wrap才能设置float)
 
若元素的高度不一定的话
vertical-align只有在父层为 td 或者 th 时, 才会生效, 对于其他块级元素, 例如 div、p 等, 默认情况是不支持的. 为了使用vertical-align, 我们需要设置父元素display:table, 子元素 display:table-cell;vertical-align:middle;
/*第一种方法*/
.parent{display:table}
.child{display:table-cell;vertical-align:middle;}
优点:元素高度可以动态改变,不需要css定义,如果父元素有足够空间,该元素不会被截断
缺点:IE6、7,甚至IE8 beta中无效
 
方法④:使用绝对定位
.parent{position:relative;}

.child{positon:absolute;top:50%;transform:translate(0,-50%);} 
优点:基本只设置子元素,不影响其他元素
缺点:transform兼容性问题

方法⑤:使用flex实现方法 (父)flex + align-items

.parent{display:flex;align-items:center;} 
优点:只要设置parent
缺点:flex和align-items的兼容性

三、【终极需求】水平垂直同时居中!

方法①:元素高度固定

.parent{position:relative;}
.child{position:absolute;top:50%;left:50%;width:固定;height:固定;margin-top:-0.5*高度;margin-left:-0.5*宽度;}

适用于所有浏览器

方法②:元素高度固定

.parent{position:relative;}
.child{position:absolute;width:固定;height:固定;top:;left:;right:;
bottom:;margin:auto
}

适用于所有浏览器

方法③:(父)text-align + table-cell + vertical-align,(子)inline-block(兼容性方案)

.parent{display:table-cell;vertical-align:middle;text-align:center;}
.child{display:inline-block;}

方法④:使用绝对定位

.parent{position:relative;}
.child{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);}
优点:基本只设置子元素,不影响其他元素
缺点:transform兼容性问题
方法⑤:利用flex实现
.parent{display:flex;justify-content:center;align-items:center;}
优点:只要设置parent
缺点:flex和align-items的兼容性

第147天:web前端开发中的各种居中总结的更多相关文章

  1. web前端开发中的各种居中

    居中是我们使用css来布局时常遇到的情况.使用css来进行居中时,有时一个属性就能搞定,有时则需要一定的技巧才能兼容到所有浏览器,本文就居中的一些常用方法做个简单的介绍. 注:本文所讲方法除了特别说明 ...

  2. WEB前端开发中的图片压缩

    web前端开发中,图片的重要性不言而喻,而由于一些图片的大小加上现在国内的网速不给力等种种原因,我们非常有必要对网站使用的图片进行压缩,压缩图片必然会带来图片质量的损失,我们要尽可能的在质量降低很小的 ...

  3. Web前端开发中的MCRV模式(转)

    作者: izujian  来源: baiduux 摘要:针对前端开发中基于ajax的复杂页面开发所面临的代码规模大,难以组织和维护,代码复用性.扩展性和适应性差等问题,本文尝试以MVC思想为 基础,结 ...

  4. Web前端开发中的小错误

    Web前端开发中的小错误 错误1:表单的label标签跟表单字段没有关联 利用“for”属性允许用户单击label也可以选中表单中的内容.这可以扩大复选框和单选框的点击区域,非常实用. 错误2:log ...

  5. web前端开发中常用的尺寸和位置

    我们在日常web前端开发过程中,会经常用到各种尺寸和位置.通常是js做动画的时候.轮播图,滚屏动画,粒子,碰撞检测,拖拽,滚动加载等等.这里我将常用的尺寸和位置的获取进行总结,不包括canvas,SV ...

  6. px em rem在WEB前端开发中的区别

    我们都知道基于像素的字体大小所用的单位是px,但是随着响应式设计的不断火热,基于相对字体大小的单位em变开始流行起来.当然,rem也在Web前端开发人员讨论如何更好设置字体大小的讨论话题之列.是不是需 ...

  7. web前端开发中的浏览器兼容性总结

    1.居中问题 div里的内容,IE默认为居中,而FF默认为左对齐,可以尝试增加代码margin: 0 auto; 2.高度问题 两上下排列或嵌套的div,上面的div设置高度(height),如果di ...

  8. WEB前端开发中的SEO注意点

    近几年来,SEO在国内得到了蓬勃的发展,其中很多的SEO技术越来越体现在web前端的一些细节上.要做好SEO,WEB前端这一块也要做必不可少的优化. 这就要求我们WEB前端工程师在开发页面的时候,要写 ...

  9. web前端开发中Nodejs、Grunt、npm等的介绍、使用

    一.Nodejs的安装: Grunt和所有grunt插件都是基于nodejs来运行的,如果你的电脑上没有nodejs,就去安装吧.去 https://nodejs.org/ 上,点击页面中那个绿色.大 ...

随机推荐

  1. 20155331 实验四 Android开发基础

    20155331丹增旦达实验四报告 实验四 Android程序设计-1 Android Stuidio的安装测试: 参考<Java和Android开发学习指南(第二版)(EPUBIT,Java ...

  2. 20145209 实验一《Java开发环境的熟悉》实验报告

    20145209 实验一<Java开发环境的熟悉>实验报告 实验内容 1.使用JDK编译.运行简单的Java程序. 2.使用Eclipse 编辑.编译.运行.调试Java程序. 提交 Li ...

  3. POJ2513_Colored Sticks_KEY

    题目传送门 题目大意:给你若干根木棍,每根木棍有前后两种颜色,连接两根木棍需要前后颜色相同,求能否将所有木棍连接在一起. Solution: 不要将木棍看成点,将颜色看成点. 其实就是求是否存在欧拉路 ...

  4. PostgreSQL参数学习:vacuum_defer_clean_age

    官方文档: http://www.postgresql.org/docs/9.3/static/runtime-config-replication.html 为了防止slave端读取数据时,因为读到 ...

  5. SPOJ 694&&SPOJ705: Distinct Substrings

    DISUBSTR - Distinct Substrings 链接 题意: 询问有多少不同的子串. 思路: 后缀数组或者SAM. 首先求出后缀数组,然后从对于一个后缀,它有n-sa[i]-1个前缀,其 ...

  6. 四、Django设置相关

    1.全局设置 setttings文件 import os import sys # Build paths inside the project like this: os.path.join(BAS ...

  7. Unity Lighting - Light Probes 光照探针(十)

      Light Probes 光照探针 Only static objects are considered by Unity’s Baked or Precomputed Realtime GI s ...

  8. JY播放器【网易云音乐破解下载】

    今天给大家带来一款神器----JY播放器.可以直接下载网易云音乐的歌曲. 目前已经支持平台(蜻蜓FM.喜马拉雅FM.网易云音乐.QQ音乐) 使用方法: 在电脑打开网易云音乐或者网站找到你要听的歌曲或歌 ...

  9. Nginx之一:Nginx的编译安装

    一.Nginx简介 官方网址:http://nginx.org/ Nginx是由1994年毕业于俄罗斯国立莫斯科鲍曼科技大学的同学为俄罗斯rambler.ru公司开发的,开发工作最早从2002年开始, ...

  10. CSP201312-3:最大的矩形

    引言:CSP(http://www.cspro.org/lead/application/ccf/login.jsp)是由中国计算机学会(CCF)发起的"计算机职业资格认证"考试, ...