从品牌网站建设到网络营销策划,从策略到执行的一站式服务
小编给大家分享一下CSS垂直居中怎么实现,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!
你所需要的网站建设服务,我们均能行业靠前的水平为你提供.标准是产品质量的保证,主要从事网站设计制作、成都做网站、企业网站建设、移动网站建设、网页设计、品牌网站制作、网页制作、做网站、建网站。成都创新互联公司拥有实力坚强的技术研发团队及素养的视觉设计专才。
代码实现:
child
上面的代码运行结果是这样的:
相信代码大家已经很熟悉了,但是你真正理解其中的原理吗?下面我们就看一下它是如何怎样一步步实现垂直居中的
分析
首先我们要知道一个关键知识点,那就是:父元素基线(baseline)的位置是可以改变的,它不是固定的,记住这一点很重要
接着,我们精简一下代码,去掉关键部分
child
我们将font-size:0
和vertical-align:middle
注释后,运行结果如下:
从图中不难看出,对于:before
伪元素(以下简称伪元素)来说,加与不加vertical-align:middle,结果都是一样的,在垂直方向它始终会占满父元素;但对于.child元素情况就不同了,它在垂直方向的位置发生了改变,那么这是为什么呢?
其实伪元素在此处的作用就是为了改变(或者叫重新定义)父元素baseline的位置,我们来回顾一下vertical-align:middle
在MDN文档中的定义
middle: 使元素的中部与父元素的基线加上父元素x-height
的一半对齐
那么,对比我们的示例:
伪元素的中部就是它垂直方向的中点,这不难理解
父元素的基线我们暂且不管它在哪里,我们只要记住它是可以改变的就足够了
x-height的一半,因为我们在父元素中将font-size
置为0,所以x-height
(小写x字母的高度)的一半也是0,即没有高度
这样一下,就相当于伪元素的中点只要与父元素的基线对齐就可以了,因为x-height
是0,所以加与不加无所谓;再加上Css中元素默认是左上方对齐的,对于这个限制,也就是说当伪元素加上vertical-align:middle
后,默认情况下它是不会超出父元素的范围显示的,那么这时伪元素高度已确定:父元素高度的100%,中点也已确定
接下来伪元素就会对父元素说:我垂直方向的中点已经确定了,变是不可能变的,这辈子都不可能变,但我的中点想和你的基线对齐,你自己看着办吧
然后父元素妥协了,将它自身的基线移动到与伪元素中点水平对齐的位置,到此父元素基线的位置也已确定,近似其高度的一半
最后.child元素添加了自己的vertical-align:middle
,按照middle: 使元素的中部与父元素的基线加上父元素x-height
的一半对齐这句定义,.child元素的font-size
由于继承关系也是0,所以它的中点也就自然而然与早已确定的父元素基线对齐,从而实现垂直居中,到此结束
以上是“CSS垂直居中怎么实现”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注创新互联行业资讯频道!
成都网站建设公司地址:成都市青羊区太升南路288号锦天国际A座10层 建设咨询028-86922220
成都快上网科技有限公司-四川网站建设设计公司 | 蜀ICP备19037934号 Copyright 2020,ALL Rights Reserved cdkjz.cn | 成都网站建设 | © Copyright 2020版权所有.
专家团队为您提供成都网站建设,成都网站设计,成都品牌网站设计,成都营销型网站制作等服务,成都建网站就找快上网! | 成都网站建设哪家好? | 网站建设地图