不走寻常路,CSS垂直居中的另类实现

ゝ一纸荒年。 2023-02-26 13:22 5阅读 0赞

## 前言 ##

众所周知，“css如何实现元素垂直居中？”已经是一个老生常谈的问题了，这个问题目前已经有了许多解决方案，这些方案也都有各自适用的场景以及优缺点，大致如下：

*  flex布局
 *  grid布局
 *  table布局
 *  line-height搭配height
 *  position搭配margin
 *  position搭配transform
 *  ...

**[打造全网web前端全栈资料库（总目录）看完学的更快，掌握的更加牢固，你值得拥有（持续更新）][web]**

那么今天我们就来理解其中一种有效但不常被使用的方案的原理，它就是：**伪元素`:before`搭配`vertical-align:middle`实现元素垂直居中**，先来看一下具体的代码实现：

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

![format_png][]

相信代码大家已经很熟悉了，但是你真正理解其中的原理吗？下面我们就看一下它是如何怎样一步步实现垂直居中的  
分析  
首先我们要知道一个关键知识点，那就是：**父元素基线（baseline）的位置是可以改变的，它不是固定的**，记住这一点很重要  
接着，我们精简一下代码，去掉关键部分

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

![format_png 1][]

从图中不难看出，对于`: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中元素默认是左上方对齐的
 *  伪元素高度与父元素保持统一
 *  父元素将font-size置为0，进而x-height也被置为0
 *  父元素基线的位置可改变

只要理解了原理，我们就不用死记硬背代码，也不会忘记如何实现；文中如有错误，欢迎指正~

[web]: https://zhuanlan.zhihu.com/p/138726269
[format_png]: /images/20230209/2f0999fb02c4488a9f9b26c539161752.png
[format_png 1]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9waWMxLnpoaW1nLmNvbS84MC92Mi05ZGQxYzFjN2UwYmNkMTYxY2M2MTVmMTBkOTBmODY2MF83MjB3LmpwZw?x-oss-process=image/format,png