1、css垂直水平居中前言之爆錘面試官神器-css無論是實際開發中，亦或者是求職面試中，css垂直居中往往都是一個繞不開的話題，其中不乏有許多面試者在多次雙重嘗受打擊之后，而沒有一個很好的反擊點，剛好結合自己以前受的委屈和痛苦，來給大家一個錘爆面試官大佬們的機會。其實垂直居中主要分為了兩種類型：居中元素寬高已知和居中元素寬高未知，那么我們就結合這兩種類型來一一做舉例。居中元素寬高已知1.absolute+marginauto顧名思義，就是利用當前元素的ositionabsolu和marginauto注意使用此方法：父元素與當前元素的高度要設置;通過將各個方向的距離都設置為0此時將margin設置為

2、auto，就可以實現垂直居中顯示了;arentPH|U：|atietJVweigtborerXHHdBeelblue.cilbacgrounit核心代碼tomatoheigtositionabsolutetobottommarginlerigt具體效果如下：2.absolute+負margin利用絕對定位百分比來實現，因為當前元素的百分比是基于相對定位（也就是父元素）來定位的然后再用負的margin-to和margin-le來進行簡單的位移即可，因為現在的負margin是基于自身的高度和寬度來進行位移的。具體代碼如下:arentositioeigtborersoliseelbluecilbac

3、grountomatoight核心代碼to5I*5margin-to-5margin-left-5具體效果如下：3.absolute+calc使用的一個計算函數來進行計算即可；方法與上面類似具體代碼如下:arentth0Vw_heightvhborer3Xlmelblue核心代碼.chilbacgrounith核心代碼tomato|jhtositionabsolutetocalc5-leftcalc5-具體效果如下：居中元素寬高未知4.absolute+transform利用的新特性transform；因為transform的translate屬性值如果是一個百分比，那么這個百分比將是基于自身

4、的寬咼計算出來的。具體代碼如下:arentth9heightvhborer3elblue核心代碼/transform.chilbacgroun核心代碼ositiona具體效果如下:5.lline-heightl+lvertical-align把當前元素設置為行內元素，然后通過設置父元素的tet-alcen現水平居中;同時通過設置當前元素的etcal-al來實現d垂直居中；最后設置當前元素的le-et來繼承父元素的le-e。具體代碼如下:aetbe核心代碼le-etet-alI0etesteelble.clbac核心代碼slaetcal-alle-eate-blcletal具體效果如下:6.ta

5、ble表格元素通過最經典的table元素來進行水平垂直居中，不過代碼看起來會很冗余，不推薦使用;具體代碼如下:tbtclassaeclassttbstleaettetbe核心代碼tet-al,cete.clbac核心代碼slastle具體效果如下:atsteelblee-blc7.css-tabl表格樣式如果一定要使用table的特性，但是不想寫table元素的話，那么css-table就很適合你;具體代碼如下:9ilarenteigt9orerxoli|teellue核心代碼textalignenteragroun.omato核心代碼ilainlinelo具體效果如下：8.flex布局（一）

6、要說現在較為流行和使用較多的布局方案，那么非flex莫屬了，那么舉例兩個最常見的使用方式直接在flexontain上通過幾行代碼即可很優雅的實現9ilarentalignitemeigt9orerxoliteellue核心代碼ilaflexenterlomatoontentagroun0表麗上設置或檢索彈性盒子元素在主軸（橫軸）方向上的對齊方式;alignitem表示：定義flex子項在flex容器的當前行的側軸（縱軸）方向上的對齊方式。具體效果如下：9. flex+marginautOz)在flexite上更加優雅的實現9il核心代碼arent核心代碼ilaflexeigt9orerxoli

7、teellueagrounlomato的兩種方法使用取舍，任憑您意10. grid網格布局()grid布局相信大家在實際項目中用的較少，主要是該布局實在是太超前，導致了兼容性不是那么理想，但是不可否認的是grid的能力在布局中絕對是個質的飛越。不熟悉的可以看下阮一峰老師的詳細入門教程1r包含與幾乎相同的對齊選項，因此我們可以在grid上優牙雅的實現具體代碼如下：90vw«ig0rdrlid核心代碼digridigiriridgrd具體效果如下：11. grid網格布局()同樣我們可以像一樣，在gridi上優雅的實現具體代碼如下:idgrididigrdr核心代碼diidgrd核心代碼.igi具體效果如下：總結在學習了上面的11種垂直居中布局方法后，我們簡單概括一下如果你的項目在pc端有兼容性要求并且寬高固定，推薦使用absolute+負margin方法實現;*如果你的項目在pc端有兼容性要求并且寬高不固定，推薦使用css-tabie方式實現；*如果你的項目在PC端無兼容性要求，推薦使用fiex實現居中，當然不考慮ie的話，grid也是個不錯的選擇;如果你的項目在移動端使用，