工作中還是會用到很多
垂直居中相關的知識
，所以我覺得有必要總結一下。
我想先問一下你們能想到的實現垂直居中的方法有哪些？
1、line-height方式
2、table布局
3、inline-block方式
4、絕對定位之automargin
5、絕對定位之負margin
6、transform
7、額外div
8、flex居中
我把他們分為了兩類，文字的垂直居中和塊級垂直居中
文字垂直居中：line-height方式、table布局
塊級垂直居中：絕對定位之automargin、絕對定位之負margin、額外div、inline-block方式、transform方式、flex居中
一、line-height方式
說明：該方式只適用於情況比較簡單的單行文字，只需要簡單地把 line-height 設定為那個物件的
height
值就可以使文字居中了。這種方法在小元素上非常有用，例如使按鈕文字或者單行文字居中。
優缺點分析
優點：適用於所有瀏覽器
無足夠空間時不會被截斷；
缺點：只對文字有效(塊級元素無效)，
多行時，斷詞比較糟糕；
二、table布局
說明：
該屬性定義行內元素的基線相對於該元素所在行的基線的垂直對齊。
在表單元格中，這個屬性會設定單元格框中的單元格內容的對齊方式。
display:table此元素會作為塊級**來顯示 類似table標籤
display:table-cell 此元素會作為乙個**單元格顯示 類似td 和 th標籤
原理：
利用表布局特點，vertical-align設定為middle後，單元格中內容中間與所在行中間對齊。
優缺點分析
優點：支援任意內容的可變高度、支援響應式
，相對於line-height而言，可以相容文字有多行的情況
；缺點：每乙個需要垂直居中的元素都會需要加上額外標籤（需要table、table-cell兩個額外元素）
三、inline-block
說明：將center元素display設定為inline-block，vertical-align設定為middle，為包含框設定after偽元素，將偽元素display設定為inline-block,vercial-align設定為middle，同時設定height為100%，撐開容器。
原理：為同一行的inline-block元素設定vertical-align：middle，該行內的inline-block元素會按照元素的垂直中心線對齊。
優缺點分析
優點：支援響應式、支援可變高度；
缺點：會加上額外標記；
四、絕對定位之automargin
說明：使用絕對定位要求元素必須設定明確高度。內容超過元素高度時需要設定overflow決定滾動條的出現
resize 屬性規定是否可由使用者調整元素的尺寸。
注釋：如果希望此屬性生效，需要設定元素的 overflow 屬性，值可以是
auto
、hidden
或 scroll
。resize: none|both|horizontal|vertical;
優缺點分析
優點：支援響應式，
並且在resize後仍然居中；
缺點：沒有顯式設定overflow時，內容超過元素高度時會溢位，沒有滾動條；
五、絕對定位之負margin
說明：已知元素高度後，使用絕對定位將top設定為50%，mergin-top設定為內容高度的一半(height + padding) / 2；內容超過元素高度時需要設定overflow決定滾動條的出現；top：50%元素上邊界位於包含框中點，設定負外邊界使得元素垂直中心與包含框中心重合；
優缺點分析
優點：**量少、適用於所有瀏覽器、不需要巢狀標籤；
缺點：不支援響應式(不能使用百分比、min/max-width)；
六、transform
這是最簡單的方法，不近能實現絕對居中同樣的效果，也支援聯合可變高度方式使用。內容塊定義transform: translate(-50%,-50%)必須帶上瀏覽器廠商的字首，還要加上
top: 50%; left: 50%;
優點：
1. 內容可變高度
2. **量少
缺點：
1. ie8不支援
2. 屬性需要寫瀏覽器廠商字首
3. 可能干擾其他
transform
效果4. 某些情形下會出現文字或元素邊界渲染模糊的現象
七、額外div
說明：在需要居中的元素外插入乙個div，設定外div的height為50%，margin-bottom為內部元素的一半（height+padding）/2。內容超過元素高度時需要設定overflow決定滾動條的出現。
優缺點分析
優點：瀏覽器相容性好，支援舊版本ie；
缺點：需要額外元素、不支援響應式；
CSS水平垂直居中方式
1.grid布局實現 一 father 2.grid布局實現 二 father 3.grid配合margin實現 father son 4.flex布局實現 father 5.flex配合margin實現 father son 6.使用display table cell實現 father son ...
CSS居中方式總結
一 水平居中 1 行內元素或者display為inline的塊級元素，前提是子元素沒有float 對父元素設定 text align center 2 塊級元素 已知寬高 1 元素自身設定為 margin 0 auto 2 利用絕對定位和margin結合的方式 elem 3 塊級元素 未知寬高 1 ...
CSS居中方式總結
1.text align center 使用以上方式居中是將父級容器中display inline 的行內元素或者文字進行水平居中。2.inline height height 值 使用inline height時經常和height一起使用，使得內容垂直方向上居中，建議在列表內部的li中使用 3.m...