點擊右上方紅色按鈕關注“小鄭搞碼事”，每天都能學到知識，搞懂一個問題！

今天給大家講一種實現垂直居中的方法：偽元素法(::before/::after)

一、vertical-align實現了什么？

先來看一下vertical-align實現了什么，在CSS中這個屬性是垂直置中，指在元素中所有元素位置相互置中(中線對齊)，并不是相對于外框高度垂直居中。下面舉個例子來看一下：

樣式文件

DOM結構

上面這段代碼的效果是：

所以vertical-align=middle所有元素相互是居中對齊的，這里這些元素并未在整個外框里垂直居中。基于此，設想vertical-align=middle如果有一個元素的高度是100%的話，是不是就真正在外框里垂直居中了。然而，直接加一個DOM放在其中又顯得比較奇怪，所以，偽元素該派上用場了。往下看

二、偽元素介入

先加上偽元素的代碼：

上面代碼一定要注意display:inline-block，高度100%，為了不占空間，寬度設置0。效果如下

總結

關于垂直居中的方法有很多，偽元素法只是其中一種，它利用了行內元素相互之間的設置vertical-align=middle達到中線對齊的原理。偽元素成為其中一個不可見的元素，起著關鍵性作用。

創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎

總結

以上是生活随笔為你收集整理的css设置按钮竖直方向居中_如何借助伪元素实现垂直居中？的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。