第一種方法：組合使用display：table-cell和vertical-align、text-align，使父元素內的所有行內元素水平垂直居中（內部div設定display：inline-block即可）這在子元素不確定寬度和高度時，特別適用哦
咳咳，敲黑板劃重點啦：
與其他一些display屬性類似，table-cell同樣會被其他一些css屬性破壞，例如float，position：absolute，所以在使用display：table-cell時，盡量不要使用float或者position:absolute（可以考慮為之增加乙個父div定義float等屬性。）；設定了table-cell的元素對寬度和高度敏感（在父元素上設定table-row等屬性，也會使其不感知height。），對margin值無反應，響應padding屬性
嗯，下面是例子
對table-cell元素設定百分比（如100%）的寬高值是無效的，但是可以將元素設定display:table，再將父元素設定百分比跨高，子元素table-cell會自動撐滿父元素。這就可以做相對於整個頁面的水平垂直居中。嗯，看下面的**
display:table-cell;
text-align:center;
vertical-align:middle
flexbox(伸縮盒)是css3中新增的特性，利用這個屬性可以解決頁面中的居中問題。只需要3行**就可以實現，不需要設定元素的尺寸，能夠自適應頁面。
這個方法只能在現代瀏覽器上有效，ie10+、chrome、safari、firefox。例如：
敲黑板嘍，敲黑板嘍
1.設定container的display的型別為flex，啟用為flexbox模式。
2.justify-content定義水平方向的元素位置
3.align-items定義垂直方向的元素位置
第三種方法：display:inline-block +偽元素生成content內容
實現原理：原理：利用inline-block的vertical-align: middle去對齊before偽元素，before偽元素的高度與父物件一樣，就實現了高度方向的對齊。居中塊的尺寸可以做包裹性、自適應內容，相容性也相當好。缺點是水平居中需要考慮inline-block間隔中的留白（**換行符遺留問題。）。（寬度是已知的，高度可以是未知的）
display:inline-block;
偽元素生成content內容
咳咳，同學，敲黑板提問了，什麼是偽元素？
「偽元素」，顧名思義。它建立了乙個虛假的元素，並插入到目標元素內容之前或之後。
:before 和 :after 偽元素編碼非常簡單(和大多數的css屬性一樣不需要一大堆的字首)。這裡是乙個簡單的例子。
#example:before
#example:after
這個例子中提到了兩件事情，第一，我們用#example:before和#example:after來目標鎖定相同的元素.嚴格的說，在**中他們是偽元素。
第二，在內容模組中提到，偽元素如果沒有設定「content」屬性，偽元素是無用的。
嗯，先補充這一點小知識，後面我會找時間把偽元素的知識詳細的總結一下的
第四種方法：絕對定位+transform反向偏移。position:absolute; transform:translate(-50%,-50%);
原理很簡單：由於top、left偏移了父物件的50%寬度高度，所以需要利用transform反向偏移居中塊的50%寬高
嘿嘿，敲黑板了：transform的計算基準是元素本身，所以這裡可以用50%來做反向偏移
第五種方法：絕對定位+margin：auto（position:absolute; left:0; top:0; right:0; bottom:0; margin:auto）都要寫哦，缺一不可滴
下面先看一下例子
position:absolute;
left:0; top:0;
right:0; bottom:0;
margin:auto
下面是效果圖
解釋一下為什麼要把幾個定位方向值都要寫了（其實本來我也不懂，是看了張鑫旭的部落格後才恍然大悟的，下面是他的解釋）
當乙個絕對定位元素，其對立定位方向屬性同時有具體定位數值的時候，流體特性就發生了。
具有流體特性絕對定位元素的margin:auto的填充規則和普通流體元素一模一樣：
如果一側定值，一側auto，auto為剩餘空間大小；
如果兩側均是auto, 則平分剩餘空間；
例如，下面的css**：
.father
.son
此時.son這個元素的尺寸表現為「格式化寬度和格式化高度」，和.son設定尺寸，例如：
.son
此時寬高被限制，原本應該填充的空間就被多餘了出來，這多餘的空間就是margin:auto計算的空間，因此，如果這時候，我們再設定乙個margin:auto，那麼：
.son
我們這個.son元素就水平和垂直方向同時居中了。因為，auto正好把上下左右剩餘空間全部等分了，自然就居中啦！
第六種方法：絕對定位+margin反向偏移
position：absolute; top:50%; left:50%; margin-left:-(width+padding)/2+'px'; margin-top:-(height+padding)/2+'px';
咳咳，敲黑板劃重點了：margin值的設定不能使用百分比哦，因為margin是基於父元素的寬度來計算百分比的
這個原理和上面的方案4很相似，由於top、left偏移了父物件的50%寬度高度，所以需要利用margin反向偏移居中塊的50%寬高
咳咳，敲黑板啦，下課，哈哈
CSS實現垂直居中的方法
垂直居中是css布局中十分常見的布局效果，在平時的工作中遇到的垂直居中布局大概分為以下的幾類 1，首先是單行文字居中，非常簡單，只需要設定父級元素的高和行高相等，或者設定本身元素為內聯塊或者塊元素，再設定高和行高相等就可以。1 doctype html 2 html 3 head 4 meta ch...
CSS 關於實現垂直居中方法總結
專案裡經常在元素排列時會需要垂直居中的情況，以下在使用場景和條件限制上總結部分常用的一些垂直居中方法。將元素的height和line height設定為相同的值即可 利用display table cell賦予div類似於table等標籤的 布局特性,middle 複製 此方法相容所有瀏覽器 關於t...
7種CSS實現垂直居中的方法總結
忽然發現自己已經有段時間沒有好好的複習下css布局了，有點慚愧啊 於是打算總結一下關於css垂直居中的7種方法。設定行高 line height 在css中，line height 屬性設定兩段段文字之間的距離，也就是行高，如果我們把一段文字的line height設定為父容器的高度就可以實現文字垂...