這是我技術博客生涯的第一篇文章，想想還是有點小雞凍。。。菜鳥的征程現在要開始了

?

學習css的時候經常被各種問題糾結到不要不要的，沒辦法，只能寫寫博客幫助整理一下自己的思緒和幫助一下和我遇到同樣問題的小伙伴們

?

不知道各位學習css的小伙伴會不會被垂直居中的問題虐的好痛苦，反正我也被虐的挺慘

但是稍微整理一下，感覺好像垂直居中也就那么回事。

?

一，利用line-height

line-height是一個設置行高的一個css樣式，一行文字上面的空白+下面的空白=行高

他可以幫助我們解決垂直居中的問題

當一個div中有1行文字（記住：是1行文字）需要垂直居中時，設置line-height=div的height可是使這一行文字垂直居中，但這個辦法有點雞肋，只能用在一行文字上，但是在文本框里面的光標解決上卻很有用，現在的主流瀏覽器chrome，firefox，safari等等等在設置input=“text”時輸入文字光標是會自動垂直居中的但是在老古董ie6，ie7，ie8上卻會有問題，會變成這樣：? ???? 很坑有木有？？？沒辦法這就是ie，這時我們加上line-height=文本框的height可以解決這個問題。

?

?

二，利用table

我們知道vertical-align分別是垂直居中，但是vertical-align只有在table中才能生效，這是我們就可以利用display來解決這個問題

<div>????? →? display:table ???????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????????

　　<div>???? →diaplay:table-cell?????????? /*使這兩個div模仿表格和表格單元，給vertical-align提供一個使用的環境*/

　　　　我要垂直居中！！

　　</div>

</div>

這時設置vertical-align:middle就可以生效了，（這個辦法可以用于多行文字上）但是這個辦法在ie上的支持不是很好

?

?

三，利用負邊距

設置position：absolute→top:50%→margin-top:(-div中height的一般)

position：absolute的移動位移的中間點是在塊級元素的正中間，但是移動距離的參考是父級元素（50%是父級元素的height的50%，而不是自己的50%），如果有兩個div，父級div如果有設置position:absolute或者relative，那么子div就參照父級div來移動，如果父級的div沒有設置position:absolute或者relative，那么就參考左上角（0.0）來進行移動。

這個辦法可以使整個div垂直居中

?

?

四，利用伸縮盒（flexible-box）

伸縮盒現在有舊和新的兩個版本，新版本有取代舊版本的趨勢，本文使用的是舊版本的伸縮盒。（新版伸縮盒也可以實現）

利用伸縮盒解決垂直居中的問題也是一種好辦法，但是在使用時需要加上-webkit-，-moz-，-ms-，-o-等前綴

我們同樣需要利用display放一個box的容器：-webkit-display：box → 若文字是水平排列的使用：box-align:center? / 若文字是縱向排列的使用box-pack：center

?

?

當然，實現垂直居中還可以利用transform來實現等等，還有很多其他的辦法，但是以我目前的總結，暫時總結到這4種，本人前端菜鳥，還請各位前端大牛勿噴。

?

?

以上內容均為原創，未經允許不許私自轉載

轉載于:https://www.cnblogs.com/Gary-Guoweihan/p/4728868.html

總結

以上是生活随笔為你收集整理的css垂直居中那点事的全部內容，希望文章能夠幫你解決所遇到的問題。

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