面试官：CSS垂直居中还有什么另类方法？求职者：不太了解了

今天面试了一个前端实习生，我问了一个比较简单的问题，就是css如何实现元素垂直居中的问题，但是要说出多种方案。其实他说的不错，基本上说到了flex布局，grid布局等下面提到的布局。还不错，但是这几种都是已经经常用的，老生常谈，但是我想听到他说一种用的比较少的解决方案，了解一下他学习的深度和广度。但是很遗憾他没有说出来。

今天就给大家讲一讲这个解决方案吧

众所周知，“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元素情况就不同了，它在垂直方向的位置发生了改变，那么这是为什么呢？


如果大家对于学习前端有任何问题，学习方法，学习路线，如何学习有效率的问题，
可以随时来咨询我，或者缺少系统学习资料的，我做这行年头比较久，
自认为还是比较有经验的，可以帮助大家提出建设性建议，851231348这是我的web前端交流qun，
有任何问题可以随时来咨询我。

其实伪元素在此处的作用就是为了改变（或者叫重新定义）父元素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
父元素基线的位置可改变
只要理解了原理，我们就不用死记硬背代码，也不会忘记如何实现；文中如有错误，欢迎指正~

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

面试官：CSS垂直居中还有什么另类方法？求职者：不太了解了相关推荐

面试官说“一开始工资不会给你太高，你可以接受吗？” 怎么怼回去？？
面试时总是会遇见几个奇葩的面试官,问一些你根本不用回答,就想直接怼回去的问题!看看这些程序员遇见这样的面试官,都是怎么回答问题的! 面试开始-- 0.面试官:一开始工资不会给你太高,你可以接受吗? 程 ...
CSS 垂直居中的七种方法——史上最详细总结
博主目前在蚂蚁集团-体验技术部,AntV/S2 是博主所在团队的开源项目--多维交叉分析表格,欢迎使用,感谢到 S2 github 仓库点赞 star,有任何关于前端面试.就业.技术问题都可给在文章后 ...
高度不定垂直居中_经典：CSS垂直居中的七种方法
点击上方"程序员黑叔",选择"置顶或者星标" 你的关注意义重大! 作者: 来自互联网我们在编辑一个版面,通常都会用到水平居中和垂直居中来设计,而水平居中很好处 ...
css 图文上下居中,CSS垂直居中的6种方法
垂直居中一直是CSS布局中比较令人头疼的问题,相比于水平居中,垂直居中对于不同的元素类型需要采取截然不同的策略,因此常常会因为策略的误用导致无法成功居中.这篇文章总结了垂直居中的6种常见策略. Ver ...
CSS垂直居中的七个方法
我们在编辑一个版面,通常都会用到水平居中和垂直居中来设计,而水平居中很好处理,不外乎就是设定margin:0 auto:或是text-align:center:,就可以轻松解决掉水平居中的问题,但一直 ...
【245期】面试官：同类中两个方法加同步锁，多个线程支持同时访问这两个方法吗？...
点击上方"Java精选",选择"设为星标" 别问别人为什么,多问自己凭什么! 下方有惊喜,留言必回,有问必答! 每天 08:15 更新文章,每天进步一点点... ...
CSS垂直居中的8种方法
1.通过verticle-align:middle实现CSS垂直居中. 通过vertical-align:middle实现CSS垂直居中是最常使用的方法,但是有一点需要格外注意,vertical生效的 ...
经典：CSS垂直居中的七种方法
点击上方"程序员黑叔",选择"置顶或者星标" 你的关注意义重大! 作者: 来自互联网我们在编辑一个版面,通常都会用到水平居中和垂直居中来设计,而水平居中很好处 ...
交换机的接口类型面试官与求职者之间谈话。面对面试官的疯狂追问，如果你是求职者，你能扛得住嘛？
我是艺博东 ,一个思科出身专注于华为的网工. 这一期以问答的形式展开(追问式),看完它你会有所获. 面试官:交换机的接口类型有哪些? 求职者:交换机的接口类型有三种,分别是access.trunk.h ...

面试官：CSS垂直居中还有什么另类方法？求职者：不太了解了

面试官：CSS垂直居中还有什么另类方法？求职者：不太了解了相关推荐

最新文章

热门文章