.parent "/>

文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

CSS垂直居中怎么实现

2023-06-08 04:02

关注

小编给大家分享一下CSS垂直居中怎么实现,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!

代码实现:

<style type="text/css">  .parent {    display: inline-block;    width: 300px;    height: 300px;    font-size: 0;    background: #80848f;    text-align: center;  }  .parent:before {    display: inline-block;    width: 20px;    height: 100%;    content: '';    background: #ff9900;    vertical-align: middle;  }  .child {    display: inline-block;    width: 50px;    height: 50px;    background: #19be6b;    vertical-align: middle;  }</style>
<div class="parent">  <div class="child">child</div></div>

上面的代码运行结果是这样的:

CSS垂直居中怎么实现

相信代码大家已经很熟悉了,但是你真正理解其中的原理吗?下面我们就看一下它是如何怎样一步步实现垂直居中的

分析

首先我们要知道一个关键知识点,那就是:父元素基线(baseline)的位置是可以改变的,它不是固定的,记住这一点很重要
接着,我们精简一下代码,去掉关键部分

<style type="text/css">  .parent {    display: inline-block;    width: 300px;    height: 300px;        background: #80848f;    text-align: center;  }  .parent:before {    display: inline-block;    width: 20px;    height: 100%;    content: '';    background: #ff9900;      }  .child {    display: inline-block;    width: 50px;    height: 50px;    background: #19be6b;      }</style>
<div class="parent">  <div class="child">child</div></div>

我们将font-size:0vertical-align:middle注释后,运行结果如下:

CSS垂直居中怎么实现

从图中不难看出,对于:before伪元素(以下简称伪元素)来说,加与不加vertical-align:middle,结果都是一样的,在垂直方向它始终会占满父元素;但对于.child元素情况就不同了,它在垂直方向的位置发生了改变,那么这是为什么呢?
其实伪元素在此处的作用就是为了改变(或者叫重新定义)父元素baseline的位置,我们来回顾一下vertical-align:middle在MDN文档中的定义

middle: 使元素的中部与父元素的基线加上父元素x-height的一半对齐

那么,对比我们的示例:

这样一下,就相当于伪元素的中点只要与父元素的基线对齐就可以了,因为x-height是0,所以加与不加无所谓;再加上Css中元素默认是左上方对齐的,对于这个限制,也就是说当伪元素加上vertical-align:middle后,默认情况下它是不会超出父元素的范围显示的,那么这时伪元素高度已确定:父元素高度的100%,中点也已确定
接下来伪元素就会对父元素说:我垂直方向的中点已经确定了,变是不可能变的,这辈子都不可能变,但我的中点想和你的基线对齐,你自己看着办吧
然后父元素妥协了,将它自身的基线移动到与伪元素中点水平对齐的位置,到此父元素基线的位置也已确定,近似其高度的一半
最后.child元素添加了自己的vertical-align:middle,按照middle: 使元素的中部与父元素的基线加上父元素x-height的一半对齐这句定义,.child元素的font-size由于继承关系也是0,所以它的中点也就自然而然与早已确定的父元素基线对齐,从而实现垂直居中,到此结束

以上是“CSS垂直居中怎么实现”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注编程网行业资讯频道!

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-后端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯