小白總結了平時遇到的css垂直居中的方法，大家在遇到元素垂直居中的需求時，可以從以下三種思路供進行考慮：
借助於行高實現垂直居中。
借助絕對定位實現垂直居中。
在知道足夠的資訊下，使用偏移屬性實現。
第一種：借助於行高實現垂直居中
這種方式適用於文字、、表單元素等所有的行內元素，適用範圍比較廣泛。實現的方法很簡單，給父元素設定乙個行高即可。下面列舉幾個栗子，小夥伴們可以親自試一下
文字文字文字文字
第三種：在知道子父元素的高度的情況下，讓子元素在垂直方向上偏移從而實現垂直居中。讓子元素偏移的屬性由很多，例如margin、padding、top、bottom、transform。不過這種方法使用的場景有限，現實中很難遇到同時提供了子父元素高度這種簡單直白的場景，所以舉例說明的意義不大，小白就不給大家舉例子了。
CSS垂直居中精華總結
1 table cell方式 將center元素的包含框display設定為table，center元素的display設定為table cell，vertical align設定為middle。原理 利用表布局特點，vertical align設定為middle後，單元格中內容中間與所在行中間對齊...
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...