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

前言

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

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

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

<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>
复制代码

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

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

分析

首先咱们要知道一个关键知识点，那就是：父元素基线（baseline）的位置是能够改变的，它不是固定的，记住这一点很重要

接着，咱们精简一下代码，去掉关键部分

<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>
复制代码

咱们将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中元素默认是左上方对齐的
• 伪元素高度与父元素保持统一
• 父元素将font-size置为0，进而x-height也被置为0
• 父元素基线的位置可改变

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

对于垂直居中这种常见问题，哪一种方案是你的最爱呢，欢迎留言讨论~

关于咱们