前言
一直有个想法要把各种居中的方法总结一下,但还是一直没有时间去整理。最近刚好在做样式重构的项目,顺便把一下自己有用过的或积累的居中方法给总结一下。
水平居中
- 行内元素水平居中
- 行内元素的居中比较简单,直接使用text-align就可以达到居中效果
/* 行内元素 */ .parent4 { text-align: center; }
- 块级元素水平居中(块级水平居中方法列举以下几种)
-
margin auto
这是最常用到的块级水平居中,利用margin:auto自动达到居中的效果,不过前提是子元素必须知道宽度
- 缺点: 必须提前知道元素的尺寸
/* 必须设置子元素宽度 */ .child1 { width: 100px; height: 100px; margin: 0 auto; background: aqua; }
-
利用inline-block实现水平居中
- 缺点: 必须有个父元素对其设置text-align
.parent2 { text-align: center; } /* 必须通过父元素 */ .child2 { display: inline-block; /*width: 100px; height: 100px;*/ background: aqua; }
-
利用css3新增的width属性fit-content实现
很多情况下我们并不清楚一个元素的具体尺寸是多少,但是又要实现水平居中。这个时候我们想起float,自动撑开宽高,但是可惜的是float的脱离了文档流并不能用margin:auto去实现元素的水平居中。inline-block又必须有个父级对其进行设置居中。css3新增加了width里的属性实现了元素类似于float,inline-block的包裹效果,并且可以使用margin: auto进行居中。fit-content会根据你的内容去包裹你的元素。在此处不细说明,该兴趣的小伙伴可以 看看张鑫旭老师对这几个新增的属性的讲解
/* width的其他属性 */ .parent3 { width: fit-content; margin: 10px auto; background: aquamarine; }
垂直居中
- 行内元素垂直居中
- line-height实现当行文字垂直居中
/* 行内元素,当行文字垂直居中 */ .parent1 { height: 100px; line-height: 100px; background: wheat; }
- 块级元素垂直居中(块级元素居中的方法比较多,总结如下)
-
margin负边距实现
该方法使用绝对定位利用margin负值将其居中,前提是需要 提前知道尺寸
- 优点:兼容性不错
- 缺点: 需要提前知道尺寸
.parent2 { position: relative; background: rosybrown; height: 100px; } .child2 { background: blue; position: absolute; width: 80px; height: 40px; left: 50%; top: 50%; margin-top: -20px; margin-left: -40px; }
-
如何在不知道尺寸的情况下垂直居中呢,CSS3——translate属性的出现为我们提供了可能。该方法利用translate以自身的宽高为基准来达到居中效果,相当于margin负值的作用,不过我们不需要知道尺寸,translate帮我们解决了。transform中translate偏移的百分比值是相对于自身大小的,
- 优点: 不需要提前知道尺寸
- 缺点: 兼容性不好(在移动端上基本支持)
/* 块级元素: 绝对定位 + transform 优点: 不需要提前知道尺寸 缺点: 兼容性不好*/ .parent3 { position: relative; background: antiquewhite; height: 200px; } .child3 { background: salmon; position: absolute; width: 80px; height: 40px; left: 50%; top: 50%; transform: translate(-50%,-50%); }
-
块级元素:绝对定位 + margin: auto;
结合以上两种,在介绍一个利用绝对定位的一个很好用的方法
这是从张鑫旭老师的博客搬运过来的 详情戳这里 。
优点:不需要根据宽高去做相应的位移,自动帮你居中好了,兼容性好
/* 块级元素:绝对定位 + margin: auto; 优点:不需要根据宽高去做相应的位移,兼容性好 */ .parent4 { position: relative; background: wheat; height: 200px; } .child4 { width: 80px; height: 40px; position: absolute; left: 0; top: 0; right: 0; bottom: 0; margin: auto; background: blue; }
-
利用display: table-cell实现垂直居中
display的table和table-cell一般情况下用的不多,所以很少有人去关注它。这个实现的原理就是把其变成表格样式,再利用表格的样式来进行居中,在某些情况下还是很方便的。
/* 块级元素:display: table-cell */ .parent5 { width: 600px; height: 200px; border: 1px solid red; display: table; } .child5 { display: table-cell; text-align: center; vertical-align: middle; } /* 水平垂直居中 */ .parent7 { width: 400px; height: 300px; display: table-cell; vertical-align: middle; border: 1px solid red; } .child7 { display: inline-block; vertical-align: middle; background: blue; }
-
利用calc()计算属性
缺点: 兼容性差,需要计算,消耗性能,需要提前知道尺寸
.parent8 { width: 300px; height: 300px; border: 1px solid red; position: relative; } .child8 { top:-webkit-calc(50%-50px); top:-moz-calc(50%-50px); top:calc(50%-50px); left:-webkit-calc(50%-50px); left:-moz-calc(50%-50px); left:calc(50%-50px); width: 100px; height: 100px; background: blue; }
- 利用伪元素实现居中(这个原理我还没搞懂,但是实践过真的ok)
.parent9 { width: 300px; height: 300px; border: 1px solid red; text-align: center; } .child9 { background: blue; width: 100px; height: 40px; display: inline-block; vertical-align: middle; } .parent9::before { content: ''; height: 100%; display: inline-block; vertical-align: middle; }
-
块级元素:display: flex
缺点:在pc上兼容性不好
.parent10 { width: 600px; height: 200px; border: 1px solid red; display: flex; align-items: center; /*垂直居中*/ justify-content: center; /*水平居中*/ } .child10 { background: blue; }
总结
以上是分别总结了水平居中和垂直居中常用的方法,要想实现水平垂直居中可以自己组合搭配一下。方法目前总结了这几种,之后有新的方法也会持续更新,未完待续连载中....
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网
猜你喜欢:本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
一站式学习C编程
宋劲杉 / 电子工业出版社 / 2011-3 / 59.00元
《一站式学习c编程》有两条线索,一条线索是以linux平台为载体全面深入地介绍c语言的语法和程序的工作原理,另一条线索是介绍程序设计的基本思想和开发调试方法。本书分为两部分:第一部分讲解编程语言和程序设计的基本思想方法,让读者从概念上认识c语言;第二部分结合操作系统和体系结构的知识讲解程序的工作原理,让读者从本质上认识c语言。 《一站式学习c编程》适合做零基础的初学者学习c语言的第一本教材,......一起来看看 《一站式学习C编程》 这本书的介绍吧!