第一次寫，有點緊張

在頁面中，垂直居中是個老大難的問題，方法各種各樣，我這邊列舉了我最喜歡的方便的幾個方法：

1.父元素高度一定，單行文本垂直居中

html部分：

<div class="outside single-line">        我是單行內容</div>CSS部分：
.outside {	margin: 10px auto;        width: 250px;        height: 200px;        border: 3px solid #069;}/* 單行 */.single-line {        line-height: 200px;}這個最簡單，單行文本，父元素高度一定，直接設置line-height = 父元素高度就行了。
2.父元素高度一定，多行文本居中
html部分：
<div class="align_box_2">        <span class="align_Word">這里的文字用來做多行文字垂直居中對齊的測試。        	這是第二行文字，您還可以再<a href="javascript:;">添加</a>一行文字做測試！        </span></div>css部分：
.align_box_2 {        display:table-cell;         width:550px;         height:250px;         border:4px solid #beceeb;         color:#069;         vertical-align:middle;}這里使用table-cell，使用vertical-align: middle來定位，像表格一樣定位，也可以適用于圖片垂直定位，詳細的講解可以戳這里。
3.父元素高度不一定，子元素高度一定
這種情況也比較常見，方法很多人也肯定知道。
html部分：
<div class="out-auto">        <span class="text">            我是內容，父元素的高度不一定，但是我的內容高度是不變的，要把我居中...        </span></div>css部分：
.out-auto {        position: relative;        margin: 10px auto;        width: 200px;        height: 200px;        border: 3px solid #000;}.out-auto .text {        position: absolute;        top: 50%;        margin-top: -50px;        height: 100px;        border: 1px dashed #ccc;}這種方法其實很巧妙，先是絕對定位，top值為50%，找到中間的垂直的基準線，在通過margin-top上移子元素高度的一半來達到垂直居中的效果，這種不管父元素高度怎么變，只要子元素高度不變，定位一定沒問題，而且兼容性比較好。
4.父元素高度不定，子元素高度不定
一般像這種情況也可能在實際中會遇到比較多，比如手機端預覽圖片等等。
html部分：
<div class="out-auto">        <div class="inside-auto">            我的高度不定，我的父元素的高度也不定，但是要居中        </div></div>css部分：
.out-auto {        position: relative;        margin: 10px auto;        width: 200px;        height: 200px;        border: 3px solid #000;}.inside-auto {        position: absolute;        top: 50%;        border: 1px dashed #069;        transform: translateY(-50%);        -webkit-transform: translateY(-50%);        -o-transform: translateY(-50%);        -ms-transform: translateY(-50%);}這個方法使用C3的transform屬性，原理與上一中絕對定位上移的原理一致，translateY(-50%)上移自身的一般高度，不過兼容性有限，在不考慮低版本瀏覽器的情況下，這種方法真的是太太太好用了，我也一直使用這種方法，即節省代碼又效率高，PC移動都適用。
題外話：
在這里我在推薦一種方法，那就是flex布局，這種布局常見于移動端，有很多沒見過的屬性。
html部分：
<div class="v-flex">       <span class="v-item">           你好，我是flex布局       </span></div>css部分：
.v-flex {        display: flex;         justify-content: center;        align-items: center;        border: 2px solid #069;        width: 100px;        height: 200px;}
flex布局很神奇很好用，我自己也還沒有完全理解，現在很多移動端的框架都在使用這個，我也要與時俱進才行