1 table-cell方式
將center元素的包含框display設定為table，center元素的display設定為table-cell，vertical-align設定為middle。
原理：利用表布局特點，vertical-align設定為middle後，單元格中內容中間與所在行中間對齊
.container2
使用絕對定位要求元素必須設定明確高度。內容超過元素高度時需要設定overflow決定滾動條的出現
優點：支援響應式，只有這種方法在resize之後仍然垂直居中
缺點：沒有顯式設定overflow時，內容超過元素高度時會溢位，沒有滾動條
3負margintop方式
已知元素高度後，使用絕對定位將top設定為50%，mergin-top設定為內容高度的一半(height + padding) / 2；內容超過元素高度時需要設定overflow決定滾動條的出現
原理：top：50%元素上邊界位於包含框中點，設定負外邊界使得元素垂直中心與包含框中心重合；
.negative_margin_top優點：**量少、瀏覽器相容性高支援ie6 ie7
缺點：不支援響應式(不能使用百分比、min/max-width)
4利用translate
這是最簡單的方法，不近能實現絕對居中同樣的效果，也支援聯合可變高度方式使用。內容塊定義transform: translate(-50%,-50%)必須帶上瀏覽器廠商的字首，還要加上top: 50%; left: 50%;
.is-transformed
優點：1.內容可變高度 2.**量少
缺點：1.ie8不支援
2.屬性需要寫瀏覽器廠商字首
3.可能干擾其他transform效果
4.某些情形下會出現文字或元素邊界渲染模糊的現象
5彈性盒式布局
利用彈性盒式布局，將字元素的主軸、側軸的排列方式都設定為居中對齊
原理：使用css彈性盒
.is-flexbox
優點：真正的垂直居中布局
缺點：ie11才開始支援彈性布局
CSS垂直居中總結
小白總結了平時遇到的css垂直居中的方法，大家在遇到元素垂直居中的需求時，可以從以下三種思路供進行考慮 借助於行高實現垂直居中。借助絕對定位實現垂直居中。在知道足夠的資訊下，使用偏移屬性實現。第一種 借助於行高實現垂直居中 這種方式適用於文字 表單元素等所有的行內元素，適用範圍比較廣泛。實現的方法很...
CSS垂直水平居中總結
css實現垂直水平居中的方法多種，各種方法各有優劣，查閱網上資料，自己總結於此，方便日後應用。box原本認為margin只能實現水平居中，但是在大牛的文章中發現了這種垂直水平居中，異常的好用。優點 支援跨瀏覽器，包括ie8 ie10.無需其他特殊標記，css 量少 支援百分比 屬性值和min max...
css 水平居中 垂直居中 水平垂直居中
一 水平居中 1 行內元素水平居中text align center 2 塊級元素水平居中margin 0 auto 3 多個塊狀元素的水平居中 實現多個水平排列的塊狀元素的水平居中，是將要水平排列的塊狀元素設為display inline block，然後在父級元素上設定text align ce...