|
今天面试了一个前端实习生，我问了一个比较简单的问题，就是css如何实现元素垂直居中的问题，但是要说出多种方案。其实他说的不错，基本上说到了flex布局，grid布局等下面提到的布局。还不错，但是这几种都是已经经常用的，老生常谈，但是我想听到他说一种用的比较少的解决方案，了解一下他学习的深度和广度。但是很遗憾他没有说出来。 今天就给大家讲一讲这个解决方案吧 众所周知，“css如何实现元素垂直居中？”已经是一个老生常谈的问题了，这个问题目前已经有了许多解决方案，这些方案也都有各自适用的场景以及优缺点，大致如下：
那么今天我们就来了解其中一种有效但不常被使用的方案的原理，它就是：伪元素 <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>我们将
从图中不难看出，对于 其实伪元素在此处的作用就是为了改变（或者叫重新定义）父元素baseline的位置，我们来回顾一下 注：middle: 使元素的中部与父元素的基线加上父元素x-height的一半对齐 那么，对比上面的示例：
这样一下，就相当于伪元素的中点只要与父元素的基线对齐就可以了，因为x-height是0，所以加与不加无所谓；再加上css中元素默认是左上方对齐的，对于这个限制，也就是说当伪元素加上 接下来伪元素就会对父元素说：我垂直方向的中点已经确定了，变是不可能变的，这辈子都不可能变，但我的中点想和你的基线对齐，你自己看着办吧 然后父元素妥协了，将它自身的基线移动到与伪元素中点水平对齐的位置，到此父元素基线的位置也已确定，近似其高度的一半 最后.child元素添加了自己的 总结其实这种垂直居中方式的原理主要有以下几个要点：
只要理解了原理，我们就不用死记硬背代码，也不会忘记如何实现；文中如有错误，欢迎指正~ 对于垂直居中这种常见问题，哪种方案是你的最爱呢，欢迎留言讨论~ |
|
|
