1. 使用絕對定位和負外邊距對塊級元素進行垂直居中
html**：
我是測試div
css**：
複製**
#box
#child
複製**
執行結果如下：
這個方法相容性不錯，但是有乙個小缺點：必須提前知道被居中塊級元素的尺寸，否則無法準確實現垂直居中。
2. 使用絕對定位和transform
html**：
我是一串很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長很長的文字
css**：
複製**
#box
#child
複製**
執行結果如下：
這種方法有乙個非常明顯的好處就是不必提前知道被居中元素的尺寸了，因為transform中translate偏移的百分比就是相對於元素自身的尺寸而言的。
3. 另外一種使用絕對定位和負外邊距進行垂直居中的方式
html**：
我也是個測試div
css**：
複製**
#box
#child
複製**
執行結果如下：
這種方式的原理實質上和前兩種相同。補充的一點是：margin的取值也可以是百分比，這時這個值規定了該元素基於父元素尺寸的百分比，可以根據實際的使用場景來決定是用具體的數值還是用百分比。
4. 絕對定位結合margin: auto
html**：
呆呆今天退役了(。﹏。)
css**：
複製**
#box
#child
複製**
執行結果如下：
這種實現方式的兩個核心是：把要垂直居中的元素相對于父元素絕對定位，top和bottom設為相等的值，我這裡設成了0，當然你也可以設為99999px或者-99999px無論什麼，只要兩者相等就行，這一步做完之後再將要居中元素的margin設為auto，這樣便可以實現垂直居中了。
被居中元素的寬高也可以不設定，但不設定的話就必須是這種自身就包含尺寸的元素，否則無法實現。
5. 使用padding實現子元素的垂直居中
html**：
今天西安的霾嚴重的嚇人，剛看了一眼pm2.5是422
css**：
複製**
#box
#child
複製**
執行結果如下：
這種實現方式非常簡單，就是給父元素設定相等的上下內邊距，則子元素自然是垂直居中的，當然這時候父元素是不能設定高度的，要讓它自動被填充起來，除非設定了乙個正好等於上內邊距+子元素高度+下內邊距的值，否則無法精確的垂直居中。
這種方式看似沒有什麼技術含量，但其實在某些場景下也是非常好用的。
6. 設定第三方基準
html**：
今天寫了第一篇部落格，希望可以堅持寫下去！
css**：
複製**
#box
#base
#child
複製**
執行結果如下：
這種方式也非常簡單，首先設定乙個高度等於父元素高度一半的第三方基準元素，那麼此時該基準元素的底邊線自然就是父元素縱向上的中分線，做完這些之後再給要垂直居中的元素設定乙個margin-top，值的大小是它自身高度的一半取負，則實現垂直居中。
7. 使用flex布局
html**：
霧霾天氣，太久沒有打球了
css**：
複製**
#box
複製**
執行結果如下：
這種方式同樣適用於塊級元素：
html**：
程式設計師怎麼才能保護好眼睛？
css**：
複製**
#box
#child
複製**
執行結果如下：
flex布局（彈性布局/伸縮布局）裡門道頗多，這裡先針對用到的東西簡單說一下，想深入學習的小夥伴可以去看阮一峰老師的部落格。（
flex也就是flexible，意為靈活的、柔韌的、易彎曲的。
元素可以通過設定display:flex;將其指定為flex布局的容器，指定好了容器之後再為其新增align-items屬性，該屬性定義專案在交叉軸（這裡是縱向軸）上的對齊方式，可能的取值有五個，分別如下：
flex-start:：交叉軸的起點對齊；
flex-end：交叉軸的終點對齊；
center：交叉軸的中點對齊；
baseline：專案第一行文字的基線對齊；
stretch（該值是預設值）：如果專案沒有設定高度或者設為了auto，那麼將佔滿整個容器的高度。
8. 第二種使用彈性布局的方式
html**：
答案當然是多用綠色的背景哈哈
css**：
複製**
#box
#child
複製**
執行結果如下：
這種方式也是首先給父元素設定display:flex，設定好之後改變主軸的方向flex-direction: column，該屬性可能的取值有四個，分別如下：
row（該值為預設值）：主軸為水平方向，起點在左端；
row-reverse：主軸為水平方向，起點在右端；
column：主軸為垂直方向，起點在上沿；
column-reverse：主軸為垂直方向，起點在下沿。
justify-content屬性定義了專案在主軸上的對齊方式，可能的取值有五個，分別如下（不過具體的對齊方式與主軸的方向有關，以下的值都是假設主軸為從左到右的）：
flex-start（該值是預設值）：左對齊；
flex-end：右對齊；
center：居中對齊；
space-between：兩端對齊，各個專案之間的間隔均相等；
space-around：各個專案兩側的間隔相等。
9. 還有一種在前面已經見到過很多次的方式就是使用 line-height 對單行文字進行垂直居中
html**：
我是一段測試文字
css**：
複製**
#box
複製**
執行結果如下：
這裡有乙個小坑需要大家注意：line-height(行高) 的值不能設為100%，我們來看看官方文件中給出的關於line-height取值為百分比時候的描述：基於當前字型尺寸的百分比行間距。所以大家就明白了，這裡的百分比並不是相對于父元素尺寸而言，而是相對於字型尺寸來講的。
10. 使用 line-height 和 vertical-align 對進行垂直居中
html**：
css**：
複製**
#box
#box img
複製**
執行結果如下：
vertical-align並不像看起來那樣天真無邪童叟無欺，以後會單獨拎出來專門寫一篇。
11. 使用 display 和 vertical-align 對容器裡的文字進行垂直居中
html**：
我也是一段測試文字
css**：
複製**
#box
#child
複製**
執行結果如下：
這裡關於vertical-align囉嗦兩句：vertical-align屬性只對擁有valign特性的html元素起作用，例如**元素中的等等，而像這樣的元素是不行的。
valign屬性規定單元格中內容的垂直排列方式，語法：，value的可能取值有四種：
top：對內容進行上對齊
middle：對內容進行居中對齊
bottom：對內容進行下對齊
baseline：基線對齊
關於baseline值：基線是一條虛構的線。在一行文字中，大多數字母以基線為基準。baseline 值設定行中的所有**資料都分享相同的基線。該值的效果常常與 bottom 值相同。不過，如果文字的字型大小各不相同，那麼 baseline 的效果會更好。
利用css進行元素的水平居中，比較簡單，行級元素設定其父元素的text-align center，塊級元素設定其本身的left 和 right margins為auto即可。本文收集了六種利用css進行元素的垂直居中的方法，每一種適用於不同的情況，在實際的使用過程中選擇某一種方法即可。
CSS中塊級盒子居中方法合集
設定兩個盒子,父盒子裡面巢狀乙個子盒子,父盒子.father寬高500px,背景顏色為藍色,子盒子寬高300px,背景顏色為綠色,和效果如圖所示 html結構 css樣式 初始效果 下面給div盒子設定樣式,實現居中效果 方法一 給子盒子.son新增margin 0 auto 水平居中效果 方法二 ...
css居中方法
水平居中 1 文字 等行內元素的水平居中 給父元素設定text align center可以實現文字 等行內元素的水平居中。2 確定寬度的塊級元素的水平居中 通過設定margin left auto 和margin right auto 來實現的。3 不確定寬度的塊級元素的水平居中 方法一 將需要居...
CSS布局 居中方法
在web頁面布局中居中是我們常遇到的情況，而居中分為水平居中與垂直居中 文字的居中 css中對文字的居中做的非常友好，我們是需要text align,line height 兩個屬性就可以控制文字的水平以及垂直居中 head style type text css text style head b...