摘要：總結(jié)常用垂直居中方法與方法實(shí)現(xiàn)居中這是比較常用的方法。絕對(duì)居中實(shí)現(xiàn)垂直居中這是一個(gè)兼容性比較好的能夠?qū)崿F(xiàn)垂直居中的方法。

這是比較常用的方法。通過(guò)line-hight來(lái)設(shè)置行間距是實(shí)現(xiàn)垂直居中的關(guān)鍵

.wrap{
    width: 500px;
    heidth: 200px;
    line-height:200px;
    background: #80ff80;
    text-align:center;
    fontsize: 20px
}

通過(guò)background-clip設(shè)置為center-box，將背景裁剪到內(nèi)容區(qū)外沿，再利用padding設(shè)為外div減去內(nèi)div的差的一一半來(lái)實(shí)現(xiàn)

.parent{
    margin: 0 auto;
    width: 250px;
    heidth: 250px;
    background: #80ff80;
}
.child img {
    width: 150px;
    heidth: 150px;
    padding 50px;
    background-clip: center-box;
}

其百分比計(jì)算不是以父元素為基準(zhǔn)，而是以自己為基準(zhǔn)，適用于沒(méi)固定大小的內(nèi)容，min-width、max-width、overflow：scroll等。使用這個(gè)屬性時(shí)，不必定義子容器的高度，其會(huì)根據(jù)內(nèi)容來(lái)自適應(yīng)高度。但是IE8以下的瀏覽器不支持，而且屬性需要寫(xiě)瀏覽器廠商的名字，還有可能會(huì)干擾其他transform的效果。

.parent{ 
    width:300px;
    height: 300px; 
    margin: 0 auto;
    background: #89ff89; 
    position: relative;
} 
.child{ 
    position: absolute; 
    left: 50%; 
    top: 50%; 
    -webkit-transform：translate(-50%, -50%); 
    -ms-transform: translate(-50%, -50%); 
    transform: translate(-50%, -50%); 
    text-align: center
}

這是一個(gè)兼容性比較好的能夠?qū)崿F(xiàn)垂直居中的方法。
可以通過(guò)設(shè)置內(nèi)容元素：position: fixed，z-index: 999成為視口居中，
更改百分比寬高、最大最小寬度使其能夠?qū)崿F(xiàn)響應(yīng)，
只要 margin:auto，內(nèi)容塊將垂直居中，使用top、left、button、right可以設(shè)置偏移
居中內(nèi)容比父容器高時(shí),加overflow:auto可防止內(nèi)容溢出
但是唯一的確定就是父容器的高度必須是可知的。

.parent{ 
   width:400px;
   min-height: 400px; 
   margin: 0 auto;
   background: #89ff89; 
   position: relative;
} 
.child{ 
   width:100%;
   height:80%;
   overflow:auto;
   margin:auto;
   position: absolute; 
   left: 0; 
   top: 0; 
   bottom: 0;
   right: 0; 
   text-align: center
}

這是比較流行的一種方法，當(dāng)塊元素尺寸已知，外邊距margin取負(fù)數(shù)，大小為 （width/heigth + pdding）/2，加上top和left各為50%，這個(gè)方法兼容IE6以上的IE瀏覽器，代碼量也比較少。但是不能自適應(yīng)，不支持百分比尺寸和 min-/max- 屬性設(shè)置，內(nèi)容可能會(huì)溢出容器，需要計(jì)算margin的取值

.child{ 
    width:200px;
    height:300px;
    padding:20px;
    position: absolute; 
    left: 50%; 
    top: 50%; 
    margin-left: -120px;
    margin-top: -170px;
    text-align: center
}

其內(nèi)容塊高度可以隨著實(shí)際內(nèi)容的高度而變化，內(nèi)容溢出時(shí)父元素會(huì)自己撐開(kāi)，在瀏覽器中的兼容性也比較好，但是需要三層元素才能使最內(nèi)層的元素居中

.wrap .is-table {
    display: table;
}
.is-table .table-cell{
    display:table-cell;
    vertical-align: middle;
    max-width:500px;
    min-height: 400px;
    background: #0ff80
}
.table-cell .box{
    width: 80%;
    margin: 0 auto;
    text-align: center;000008
}

使用flexbox實(shí)現(xiàn)垂直居中很方便而且代碼簡(jiǎn)潔， align-items 使元素水平居中， justify-content 是元素垂直居中
但是其兼容性不是很好，對(duì)于IE只能兼容10以上，但是隨著IE一些比較低的版本逐漸退出市場(chǎng)，flexbox的布局也將成為趨勢(shì)

.parent{ 
    display: flex;
    align-items: center;
    justify-content:center;
    width:400px;
    background: #89ff89; 
} 
.child{ 
    text-align: center;
    padding: 10px;
}