CSS垂直居中怎么实现

小编给大家分享一下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;
  }


  child

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

CSS垂直居中怎么实现

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

分析

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


  .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; */
  }


  child

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

从图中不难看出，对于: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垂直居中怎么实现”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注创新互联行业资讯频道！

CSS垂直居中怎么实现

其他资讯