css垂直居中的解决方案,CSS中这个函数也是可以实现垂直居中的
人气:311 ℃/2023-11-20 11:03:14
点击右上方红色按钮关注“小郑搞码事”,每天都能学到知识,搞懂一个问题!
大家好!我是/小郑搞码事/的小郑
今天给大家分享一个CSS函数(calc)从认识到如何实现元素居中的事。
没错,今天要说的就是calc函数的功能,先来简单认识一下。
一、认识一下calc函数这个函数出自于CSS3的功能,可以用来动态计算长度值。不要想太复杂,更不需要说的太多,只需要记住下面几点,就足够了熟悉它了:
第一,可以组合使用不同单位
如百分比,PX,rem等等,举个例子:
看了吧,上面代码中DOM的宽度可以使用百分比与PX计算得到,也就是说可以组合不同单位来计算。
第二,使用calc的结果是表达式本身而非结果值
这是什么意思呢?还是以上面这段CSS代码为例子,编译后运行在浏览器中仍然是一个表达式,而不是表达式计算出来的值,这就意味着宽度可以随父元素宽度变化而变化。如下所示:
从上述效果看出,和认识的一样。
第三,兼容性及处理办法
从上图可以看出,兼容性也还是不错的,当然,对于一些不兼容的浏览器我们也会给上一个固定的值。如下所示:
关于这个函数功能认识到这里,它的作用就非常多了,下面使用它来实现元素的垂直居中。看看怎么实现。
二、如何实现垂直居中关键代码如下:
需要注意的是,使用的是top值,而不是margintop,因为margintop拿不到水平的高度值。
如果想简单实现垂直居中,使用calc也是一种办法。
总结文章一开始带大家了解了calc函数特性,这个是最重要的,因为只有你记住,知道了它有哪些特点才会将它应用到所有可能应用的场景。发挥这个属性的作用,实现垂直居中就是其中之一。
- 05-142023年港口煤炭价格:魏桥2023年12月份采购价格出炉
- 02-05松毛虫赤眼蜂防治对象 沁阳将投放赤眼蜂1万亩次
- 02-20白考儿与米兰:白考儿与米兰的命运却大不同
- 01-06云南中考体育1000米得分标准:中考体育100分省份云南调整800
- 10-16抖音爆款商品排行榜裤子,一周抖音鞋类爆款及达人带货榜
- 12-23我是一只千年狐 我是一只爱了千年的狐
- 12-13保山南红的纹,一组图欣赏云南保山南红
- 01-05中秋节可以摆什么水果?9月29日中秋节,有钱没钱记得把这6种吉祥果摆上桌
- 09-23人力资源职业前景分析 为什么说职位分析对于人力资源从业者来说很重要
- 10-08爸爸唱给女儿的歌超暖心,我爱你,爸爸
- 12-05yeezyboost怎么发售?开不开心,YEEZYBOOST
- 04-24挂机了还能玩同城匹配吗?同城匹配弊端出现玩家存在诸多顾虑
- 04-04大妈地铁脱鞋鞋子被踢走:男子乘车脱鞋因脚太臭引发白衣大哥怒怼
- 12-20部编二年级语文看图写话专项练习,小学语文看图写话专项练习
- 10-01荣耀X50和红米note11 5g天玑810 天玑800大战麒麟820红米Note9对标荣耀10X
- 01-06章莹颖的寻人启事:她曾写下生命短暂不能平凡