總結幾種常見的垂直居中的佈局

廢話不多說，直接看程式碼！

1.margin: auto;實現絕對定位元素的水平垂直居中，IE7及以下低版本瀏覽器不相容

<div class='maps1'></div>

* {
    margin: 0;
    padding: 0;
    border: 0;
    list-style: none;
}

.maps1{
    width: 200px;
    height: 200px;
    background-color: #000;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
}

2. margin的負間距實現絕對定位元素的水平垂直居中,相容性比較好，比較常用

<div class='maps2'></div>

* {
    margin: 0;
    padding: 0;
    border: 0;
    list-style: none;
}
.maps2{
    position: absolute;
    left: 50%;
    top: 50%;
    width: 200px;
    height: 200px;
    background-color: green;
    border: 10px solid #000;
    margin: -110px 0 0 -110px;
}

3.通過transform偏移實現絕對定位元素的水平垂直居中， IE8及以下低版本瀏覽器不相容

* {
    margin: 0;
    padding: 0;
    border: 0;
    list-style: none;
}
.maps3{
    position: absolute;
    left: 50%;
    top: 50%;
    width: 200px;
    height: 200px;
    background-color: gray;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

4.CSS3彈性盒模型佈局不定寬高實現水平垂直居中 ，CSS3彈性盒模型佈局本身就不支援低版本IE6-9瀏覽器的相容

 <div class="maps4">
        <div></div>
 </div>

body,
html {
    height: 100%;
}
* {
    margin: 0;
    padding: 0;
    border: 0;
    list-style: none;
}
.maps4{
    /** height:100%就是讓頁面撐滿整個可視區 */
    height: 100%;
    /** 流行版彈性盒模型佈局 */
    display: flex;
    display: -webkit-flex;
    /** 老安卓版彈性盒模型佈局 */
   /** display: box;
    display: -webkit-box;
    /** 老安卓版的橫向居中 */
    /**box-pack: center;
    -webkit-box-pack: center;
    /** 老安卓版的垂直居中 */
    /**box-align: center;
    -webkit-box-align: center;
    /** 流行版的橫向居中 */
    justify-content: center;
    -webkit-justify-content: center;
    /** 流行版的垂直居中 */
    align-items: center;
    -webkit-align-items: center;
}
.maps4 div {
    width: 100px;
    height: 100px;
    background-color: black;
}

看程式碼應該是比較清晰的了，當自己的筆記，不喜勿噴！