CSS元素垂直居中方法總結

　　堅持，堅持，堅持。。。

　　以上爲自我鼓勵，哈哈。。。

　　－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－

　　相信沒有真正是嘗試過的人應該都和我同樣，以爲居中很簡單啊，不是有個margin: auto嘛，若是你真正嘗試過，你就知道，垂直居中真的不想你想象中那麼簡單。

　　在平常設計網頁過程當中，咱們能夠根據text-align: center實現行內元素水平居中問題，咱們也能夠根據margin: 0 auto實現塊級元素水平居中問題。可是，對於垂直居中，一直都是一個很難解決但常常須要解決的問題。下面由我來給你們介紹幾個解決方法。

　　1. 已知寬高，結合絕對定位和負margin來解決

　　首先使用絕對定位，使top和left屬性可用。而後將元素經過top和left向下移動適口的50%，此時，元素的左上角位於視口中心點；最後經過負margin來移動元素自身的一半，將元素的中心點移至視口中心點。

body {
    width: 100vw; // vw：是視口寬度的1/100
    margin: 0;
    padding: 0;
}


/* 在已知寬高的狀況下，使用負margin解決*/

#way1 {
    width: 300px;
    height: 200px;
    background: #f33;
    position: absolute; 
    top: 50%;
    left: 50%;
    margin-left: -150px;
    margin-top: -100px;
}

　　2. 未知寬高，結合絕對定位和translate來解決

　　大多數狀況下，元素的高度都是由內容撐高，所以咱們很難用負margin來進行移動，css中大部分屬性百分比都是相對於父級元素，如padding。可是，咱們能夠發現translate中的參數是相對於自身的。所以咱們就能夠利用translate，實現前面負margin的功能。

body {
    width: 100vw;
    margin: 0;
    padding: 0;
}


/* 在不知道寬高的狀況下，translate屬性移動元素自己*/

#way2 {
    width: 300px;
    height: 200px;
    background: #f33;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

　　3. 結合margin和translate來解決

　　咱們知道，margin能夠實現塊級元素的水平居中問題，咱們能夠直接利用margin來進行水平居中操做，在用translate來進行垂直居中。

body {
    width: 100vw;
    margin: 0;
    padding: 0;
}


/* 使用margin對元素進行居中，同時利用vh單位獲取視口一半高度 */

#way3 {
    width: 300px;
    height: 200px;
    background: #f33;
    margin: 50vh auto 0; //vh: 視口高度的1/100
    transform: translate(0, -50%);
}

　　4. 使用flexbox實現

　　正常狀況下，margin只能實現水平居中，可是當咱們在須要居中元素的父元素設置爲flexbox，此時margin：auto就會同時設置水平和垂直居中。

body {
    width: 100vw;
    margin: 0;
    padding: 0;
    display: flex;
}


/* 父元素須要設置爲flexbox，而且須要設置高度，margin:auto將會在水平和垂直方向上都居中; */

#way4 {
    width: 300px;
    height: 200px;
    background: #f33;
    margin: auto;
}

　　5. 使用flexbox中的align-items和justify-content屬性實現

　　這種方法，必需要設置父元素的高度，不然沒法實現垂直上的居中。

body {
    width: 100vw;
    margin: 0;
    padding: 0;
    display: flex;
    min-height: 100vh;
    align-items: center;
    justify-content: center;
}


/* 能夠在父元素上設置aligin-items和justify-content爲center實現居中 */

#way5 {
    width: 300px;
    height: 200px;
    background: #f33;
}

　　傳統方法中，會利用表格的特性實現居中效果，也能夠利用js來實現效果。上面用到了不少CSS3的屬性，可能會存在兼容性問題，望你們根據本身的實際狀況有針對性的選擇。