開篇序言：之前在華南理工大學計算機研究所面試稿茉，被一個老師抓著這個問題問了一下午 當時回答的很窘迫昨凡，大概只說出七八種 后面發(fā)現(xiàn)也有小伙伴遇到過這個面試題 所以今日來份總結(jié)
當寬度固定時
1、absolute + margin 負值
絕對定位在這個例子中會設置top:50%來抓取空間高度的50%，接著在將居中元素的margin-top設定為負一半的高度踪蹬，這樣就能讓元素居中了,這種方式比較常見
2.absolute + margin auto
又一個絕對定位的垂直居中的方案，這個方式比較特別一點臣咖，當元素設置為絕對定位后跃捣，假設它是抓不到整體可運用的空間范圍，所以margin:auto會失效夺蛇，但當你設置了top:0;bottom:0;時疚漆，絕對定位元素就抓到了可運用的空間了，這時你的margin:auto就生效了（神奇吧）刁赦，如果你的絕對定位元素需要水平居中于父層娶聘，那你同樣可以設定left:0;right:0;來讓絕對定位元素取得空間可運用范圍，再讓marign-left與margin-right設定為auto即可居中截型。但此方式的缺點是你的定位元素必須有固定的寬高（百分比也算）才能正常居中趴荸。
當不需要固定寬度時
3、absolute + translate
我們用絕對定位時的top與right設置元素的上方跟左方各自設為50%宦焦，再利用translate(-50%,-50%)位移居中元素自身寬與高的50%就能達成居中的目的（疑惑點：再手機端ios中這個不太管用[微信公眾號平臺]）
4、Flex + align-items
設定父層display:flex以及設定次軸(cross axis)屬性align-items:center 顿涣，這個方式的優(yōu)點是此層不需要設定高度即可自動居中
5波闹、Flex + :before + flex-grow
Flex有多種方式可以讓你把數(shù)據(jù)居中，適用Flex-grow的延展特性來達成涛碑，這個例子中Amos適用了flex-direction:column直式排法精堕，搭配:before偽元素適用flex-grow伸展值能夠取得剩下所有空間的特性，把它設定成一半的剩余空間就能做到把內(nèi)容數(shù)據(jù)準確的推到垂直中間位置蒲障，算是個傳統(tǒng)技法的延伸方式歹篓。
6、Flex + margin
繼續(xù)用Flex來居中揉阎，由于Flex元素對空間解讀的特殊性庄撮，我們只要在父層元素設定display:flex，接著在需要垂直居中的元素上設定margin:auto毙籽，即可自動居中
7洞斯，F(xiàn)lex + align-self
對flex次軸cross axis 的個別對齊方式只要對單一子層元素設定align-self:center就能達成垂直居中的目的
8， Grid + template （ Grid 網(wǎng)格布局 ）
它將網(wǎng)頁劃分成一個個網(wǎng)格坑赡，可以任意組合不同的網(wǎng)格烙如，做出各種各樣的布局么抗。以前，只能通過復雜的 CSS 框架達到的效果亚铁，現(xiàn)在瀏覽器內(nèi)置了蝇刀。
9，Grid + align-items
align-items屬性設置單元格內(nèi)容的垂直位置（上中下）徘溢。align-items不僅是Flex可用熊泵，連CSS Grid也擁有此屬性可使用，但在Flex中align-items是針對次軸cross axis作對齊甸昏，而在CSS Grid中則是針對Y軸做對齊顽分。
10、Grid + align-content
CSS Grid的align-content跟Flex的align-content有點差異施蜜，CSS Grid對于空間的解釋會跟Flex有一些些的落差卒蘸，所以導致align-content在Flex中僅能針對多行元素起作用，但在Grid中就沒這個問題翻默，所以我們可以很開心的使用align-content來對子元素做垂直居中
11缸沃，Grid + align-self
基本上就是對grid Y軸的個別對齊方式，只要對單一子層元素設置為align-self:center就能達成垂直居中
12修械、Grid + place-items
place-items這屬性不知道有多少人用過趾牧，此屬性是align-items與justify-items的縮寫，簡單的說就是水平與垂直的對齊方式肯污，想當然的翘单，設定center就能居中
13， Grid + place-content
place-content這屬性有多少人用過蹦渣，此屬性是align-content與justify-content的縮寫哄芜，簡單的說就是水平與垂直的對齊方式，想當然的柬唯，設置center就能居中
14认臊，Grid + margin
繼續(xù)用Grid來居中，由于Grid元素對空間解讀的特殊性锄奢，我們只要在父層元素設定display:grid失晴，接著在需要垂直居中的元素上設置margin:auto即可自動居中。
15.Display：table-cell
display屬性將div設置成表格的單元格拘央，這樣就能利用支持存儲單元格對齊的vertical-align屬性來將信息垂直居中（此方法是在然也教育公司學到的參考了后端人員的寫法）
文字與行業(yè)居中技巧
16涂屁、Line-height
常見于單行文字的應用，像是按鈕這一類對象堪滨，或者是下拉框胯陋、導航此類元素最常見到的方式了。此方式的原理是在于將單行文字的行高設定后，文字會位于行高的垂直中間位置遏乔，利用此原理就能輕松達成垂直居中的需求
17义矛、Line-height + inline-block
多行文本居中
18、:before + inline-block
:before 偽類元素搭配 inline-block 屬性的寫法應該是很傳統(tǒng)的垂直居中的技巧了盟萨，此方式的好處在于子元素居中可以不需要特別設定高度凉翻，我們將利用:before偽類元素設定為100%高的inline-block，再搭配上將需要居中的子元素同樣設置成inline-block性質(zhì)后捻激，就能使用vertical-align:middle來達到垂直居中的目的了制轰，此方式在以往其實是個非常棒的垂直居中解決方案，唯獨需要特別處理掉inline-block元素之間的4-5px空間這個小缺陷胞谭，但也很實用了垃杖。
19、Flex + align-content
在正常的狀況下丈屹，align-content 僅能對次軸多行flex item做居中调俘，但是當我今天子層元素不確定有多少個時，且有時可能會有單個的情況出現(xiàn)時旺垒，此技巧就能用到了（當然你也能有其他解法）彩库，既然是多行子元素才能用，那我們就為單個子組件多加兩個兄弟吧先蒋，使用:before以及:after 來讓子元素增加到多個骇钦，這樣就能使用flex的align-content屬性來居中
20、calc
Cale是計算機英文單詞calculator的縮寫竞漾，這個由微軟提出的css 方法眯搭，從此我們再也不用在那邊絞盡腦汁的數(shù)學計算了，或是想辦法用js來動態(tài)計算畴蹭，我們可以很輕松的利用calc()這個方法坦仍，來將百分比及時且動態(tài)的計算出實際要的是什么高度，真可謂是劃時代的一個方法啊叨襟，但這個方法需要注意的是大量使用的話，網(wǎng)頁性能會是比較差的幔荒，所以請謹慎使用糊闽。
21，Relative + translateY
這個技巧是利用了top:50%的招式爹梁，讓你的元素上方能產(chǎn)生固定百分比的距離右犹，接著讓要居中的元素本身使用tanslateY的百分比來達成垂直居中的需求，translate是一個很棒的屬性姚垃，由于translate的百分比單位是利用元素自身的尺寸作為100%念链，這樣讓我們要利用元素自身寬高做事變得方便很多。
22、padding
23掂墓、Write-mode
這個方式應該是比較少見到的有人使用的了谦纱，這個想法是被老友Paul所激發(fā)的，write-mode這個css屬性的功能基本上跟垂直居中是八竿子打不著君编，它的用途是改變文字書寫的方向從橫變豎跨嘉，且支持度從很早期的IE5就有支持了，但當時Amos很少使用吃嘿，一來是網(wǎng)頁多是橫書較多祠乃，另外當時除了IE瀏覽器意外，其他瀏覽器的支持度都不是很好兑燥，也就很少使用了亮瓷。
使用write-mode將一整個文字容器變成直書，接著將此容器利用text-align:center來達到垂直居中的目的降瞳，白話一點的解說就是嘱支，你把原本橫排的文字變成豎排，所以原本橫排用到的水平對齊方式力崇，就變成了控制直排的中間了斗塘，原理就是這么簡單。但要特別注意的是瀏覽器對此語法的支持度來說亮靴，需要拆開寫法才行馍盟，不然某些瀏覽器的語法不同，可能會讓你的網(wǎng)頁在某些瀏覽器上看起來無效茧吊，這會是最需要注意到的
文末結(jié)尾： 暫時只能想到這么多了 其實也就幾大類贞岭，margin grid布局 彈性布局flex，文本布局line-height和一些優(yōu)點生僻calc搓侄，Write-mode,這23點只不過是把這些拆分成的瞄桨，歡迎其他小伙伴補充以及期待在技術(shù)交流平臺上看到其他更好的補充
文章參考資料有：前端開發(fā)公眾號
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 阮一峰技術(shù)博客
