第一次寫，有點緊張
在頁面中，垂直居中是個老大難的問題，方法各種各樣，我這邊列舉了我最喜歡的方便的幾個方法：
1.父元素高度一定，單行文字垂直居中
html部分：
我是單行內容
.outside
/* 單行 */
這個最簡單，單行文字，父元素高度一定，直接設定line-height = 父元素高度就行了。
2.父元素高度一定，多行文字居中
html部分
：
這裡的文字用來做多行文字垂直居中對齊的測試。
這是第二行文字，您還可以再新增一行文字做測試！
css部分：
.align_box_2
這裡使用table-cell，使用vertical-align: middle來定位，像**一樣定位，也可以適用於垂直定位，詳細的講解可以戳這裡。
3.父元素高度不一定，子元素高度一定
這種情況也比較常見，方法很多人也肯定知道。
html部分：
我是內容，父元素的高度不一定，但是我的內容高度是不變的，要把我居中...
css部分：
.out-auto
.out-auto .text
這種方法其實很巧妙，先是絕對定位，top值為50%，找到中間的垂直的基準線，在通過margin-top上移子元素高度的一半來達到垂直居中的效果，這種不管父元素高度怎麼變，只要子元素高度不變，定位一定沒問題，而且相容性比較好。
4.父元素高度不定，子元素高度不定
一般像這種情況也可能在實際中會遇到比較多，比如手機端預覽等等。
html部分
：
我的高度不定，我的父元素的高度也不定，但是要居中
css部分：
.out-auto
.inside-auto
這個方法使用c3的transform屬性，原理與上一中絕對定位上移的原理一致，translatey(-50%)上移自身的一般高度，不過相容性有限，在不考慮低版本瀏覽器的情況下，這種方法真的是太太太好用了，我也一直使用這種方法，即節省**又效率高，pc移動都適用。
題外話：
在這裡我在推薦一種方法，那就是flex布局，這種布局常見於移動端，有很多沒見過的屬性。
html部分：
你好，我是flex布局
css部分：
flex布局很神奇很好用，我自己也還沒有完全理解，現在很多移動端的框架都在使用這個，我也要與時俱進才行
css 水平居中 垂直居中 水平垂直居中
一 水平居中 1 行內元素水平居中text align center 2 塊級元素水平居中margin 0 auto 3 多個塊狀元素的水平居中 實現多個水平排列的塊狀元素的水平居中，是將要水平排列的塊狀元素設為display inline block，然後在父級元素上設定text align ce...
css水平居中 垂直居中 水平垂直居中
css水平居中 垂直居中 水平垂直居中 水平居中 行內元素 block text align 塊級元素 方案一 分寬度定不定兩種情況 定寬度 margin 0 auto 作用 使盒子自己居中，意思是上下距離為0，auto就是左右自適應兩邊距離 不定寬度 設定子元素display inline blo...
關於CSS實現水平垂直居中
行內元素 1.text align center 對文字，按鈕等行內元素進行水平居中 2.line height 行高 當只有一行文字元素時，將line height設為行高可實現垂直居中 塊元素 3.margin 0 auto 對於有寬度的塊元素，設定margin 0 auto,相對于父元素水平居...