点击右上方红色按钮关注“小郑搞码事”,每天都能学到知识,搞懂一个问题!
今天给大家讲一种实现垂直居中的方法:伪元素法(::before/::after)
一、vertical-align实现了什么?
先来看一下vertical-align实现了什么,在CSS中这个属性是垂直置中,指在元素中所有元素位置相互置中(中线对齐),并不是相对于外框高度垂直居中。下面举个例子来看一下:
![bba0529a8efc7fde0417c815d292d901.png](https://i-blog.csdnimg.cn/blog_migrate/ff1aea6a0e96e4a0c4cf2898aba32f84.jpeg)
样式文件
![81356c31d9be771963f464f1cbce4ad6.png](https://i-blog.csdnimg.cn/blog_migrate/135fbd7c2de032abb905527b62cb0fef.jpeg)
DOM结构
上面这段代码的效果是:
![2f555e30fd349d4f0e7f2dbeb6cee8a6.png](https://i-blog.csdnimg.cn/blog_migrate/5927fa64c8525a9a52bdeea861b15e11.jpeg)
所以vertical-align=middle所有元素相互是居中对齐的,这里这些元素并未在整个外框里垂直居中。基于此,设想vertical-align=middle如果有一个元素的高度是100%的话,是不是就真正在外框里垂直居中了。然而,直接加一个DOM放在其中又显得比较奇怪,所以,伪元素该派上用场了。往下看
二、伪元素介入
先加上伪元素的代码:
![1dabd258c2a3977f0fe2062864a5cbeb.png](https://i-blog.csdnimg.cn/blog_migrate/bacb4caab2d51d4ad7e59612ecf649bf.jpeg)
上面代码一定要注意display:inline-block,高度100%,为了不占空间,宽度设置0。效果如下
![a7651bdbce1866e3b8b93f710bd6c4a6.png](https://i-blog.csdnimg.cn/blog_migrate/9739f2c4e2f5e712a4fa77fb1546d3f7.jpeg)
总结
关于垂直居中的方法有很多,伪元素法只是其中一种,它利用了行内元素相互之间的设置vertical-align=middle达到中线对齐的原理。伪元素成为其中一个不可见的元素,起着关键性作用。