CSS垂直居中的另类实现代码详解(不走寻常路)

前言 众所周知,“css如何实现元素垂直居中?”已经是一个老生常谈的问题了,这个问题目前已经有了许多解决方案,这些方案也都有各自适用的场景以及优缺点,大致如下: flex布局 grid布局 table布局 line-height搭配height position搭配margin position搭配transform ... 那么今天我们就来理解其中一种有效但不常被使用的方案的原理,它就是:伪元素:before搭配vertical-align:middle实现元素垂直居中,先来看一下具体的代码实现: <style type="text