注：以下demo都只是針對現代瀏覽器所做，未相容低版本的IE以及其他非主流瀏覽器。

實現css文字垂直居中的8種方法如下：

1.使用絕對定位和負外邊距對塊級元素進行垂直居中

css垂直居中效果：

css垂直居中實現程式碼：

這個方法相容性不錯，但是有一個小缺點：必須提前知道被居中塊級元素的尺寸，否則無法準確實現垂直居中。

2.使用絕對定位和transform

程式碼如下：

這種方法非常明顯的好處就是不必提前知道被居中的元素的尺寸，因為transform中偏移的百分比就是相對於元素自身的尺寸而言。

3.絕對定位結合margin:auto

這種方式的兩個核心是：把要垂直居中的元素相對於父元素絕對定位，top和bottom設定為相等的值，我這裡設定成0了，當然也可以設定為99999px或者-99999px，無論什麼，只要兩者相等就行。這一一步做完之後再將要居中的元素的margin設為auto，這樣就可以實現垂直居中了。

被居中元素的寬度也可以不設定，但是不設定的話，就必須是圖片這種自身就包含尺寸的元素，否則無法實現。

4.使用padding實現子元素的垂直居中

這種方式非常簡單，就是給父元素設定相等的上下內邊距，則子元素自然是垂直居中的，自然這個時候父元素是不能設定高度的，要讓它自動被填充起來，除非設定了一個正好等於上內邊距+子元素高度+下內邊距的值，否則無法精確地垂直居中。

這種方式看似沒有什麼技術含量，但其實在某種場景下也是非常好用的。

5.使用flex佈局

flex佈局（彈性佈局/伸縮佈局）里門道頗多，這裡先針對用到的東西簡單說一下，想深入學習的小夥伴可以去看阮一峰老師的部落格。

flex也就是flexible，意思為靈活的，柔韌的，易彎曲的。

元素可以通過設定display:flex;將其指定為flex佈局的容器，指定好了容器之後再為其新增align-items屬性，該屬性定義專案在交叉軸（這裡是縱向周）上的對齊方式，可能的取值有五種，分別如下：

flex-start:交叉軸的起點對齊；flex-end:交叉軸的重點對齊；

center：交叉軸的重點對齊；baseline專案第一行文字的基線對齊；

strech(該值是預設值)：如果專案沒有設定高度或者設定為auto，那麼將佔滿整個容器的高度。

6.彈性佈局

這種方式也是給父元素設定display:flex,設定好之後改變主軸的flex-direction:column,該屬性可能的取值有四個，分別如下：

row(該值為預設值)：主軸為水平方向，起點在左端；

row-reverse，主軸是水平方向，起點在有端；

column主軸為垂直方向，起點在上沿；

column-reverse：主軸為垂直方向，起點在下沿。

justify-content屬性定義了專案在主軸上的對齊方式，可能取的值有五個，分別如下（不過具體的對齊方式與主軸的方向有關，以下的值都是假設主軸為從左到右的）：

flex-staart(該值是預設值)：左對齊；

flex-end:右對齊；

center:居中對齊；

space-between:兩端對齊，各個專案之間的間隔均對齊；

space-around:各個專案兩側的間隔相等。

7.還有一種在前面已經見到過很多次的方式就是使用line-height對單行文字進行垂直居中

這裡有一個小坑需要大家注意：line-height（行高）的值不能設為100%；我們來看看官網文件中給出的關於line-height取值為百分比時候的描述：基於當前字型尺寸的百分比行間距，所以大家就明白了，如果是百分比是相對於字型尺寸來講的。

8.使用display和vertical-align對容器裡的文字進行垂直居中

這裡關於vertical-align囉嗦兩句：vertical-align屬性只對擁有valign特性的html元素起作用，例如表格元素中的<td><th>等等，而像<div><span>這樣的元素是不行的。

valign屬性規定單元格中內容的垂直排列方式，語法：<tdvalign="value">，value的可能取值有四種：

top：對內容進行上對齊

middle：對內容進行居中對齊

bottom：對內容進行下對齊

baseline：基線對齊

關於baseline值：基線是一條虛構的線。在一行文字中，大多數字母以基線為基準。baseline值設定行中的所有表格資料都分享相同的基線。該值的效果常常與bottom值相同。不過，如果文字的字號各不相同，那麼baseline的效果會更好。

更多關於CSS垂直居中的方法大家可以參考本文下面的相關文章或者諮詢我們的小編