老師在課上羅列了幾種用css絕對(duì)居中的方法，也列出了關(guān)鍵代碼，這篇文章就作為上課內(nèi)容的一個(gè)補(bǔ)充，文中所用圖片也來自老師教案，老師教案?jìng)魉烷T???：

https://github.com/quanta2015/Web-Mooc/blob/master/T02-web-css-center.md

01負(fù)外邊距

基本思路：將設(shè)置了絕對(duì)定位的子元素水平和垂直偏移50%，然后在水平和垂直方向分別偏移負(fù)自身寬高的一半，示意圖如下：

代碼如下：

<div id="parent1">
        <div id="son1">
            <div id="cont1"></div>
        </div>
    </div>

#parent1{
    width: 500px;
    height: 300px;
    position: relative;
    background-color: rgb(46,95,62);
}

#son1{
    width: 250px;
    height: 150px;
    position: absolute;
    left: 50%;
    top: 50%;
}

#cont1{
    width: 100%;
    height: 150px;
    margin-left: -50%;
    margin-top: -75px;
    background-color: rgb(23,48,31);
}

優(yōu)點(diǎn)：兼容性好，代碼量少
不足：子元素的寬高需要確定，對(duì)于高度自適應(yīng)的容器會(huì)帶來問題，建議把盒子設(shè)置成box-sizing:border-box

02負(fù)位移

基本思路：將設(shè)置了絕對(duì)定位的子元素水平和垂直偏移50%，然后用transforms屬性值將子元素偏移負(fù)自身寬高的一半，示意圖如下：

代碼如下：

<div id="parent2">
        <div id="son2"></div>
    </div>

#parent2{
    width: 500px;
    height: 300px;
    position: relative;
    background-color: rgb(46,95,62);
}

#son2{
    width: 250px;
    height: 150px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    background-color: rgb(23,48,31);
}

優(yōu)點(diǎn)：支持子容器高度自適應(yīng)；適用于響應(yīng)式布局環(huán)境；移動(dòng)瀏覽器支持較好；代碼量少
不足：不支持IE8及以西啊瀏覽器；需要添加瀏覽器私有前綴；translate可能受transform其他子屬性值的影響

03表格塊

基本思路：通過display中的table和table-cell屬性，模擬表格布局，示意圖如下：

代碼如下：

<div id="parent3">
        <div id="son3">
            <div id="cont3"></div>
        </div>
    </div>

#parent3{
    width: 500px;
    height: 300px;
    display: table;
    background-color: rgb(46,95,62);
}

#son3{
    display: table-cell;
    vertical-align: middle;
}

#cont3{
    width: 50%;
    height: 50%;
    margin: auto;
    background-color: rgb(23,48,31);
}

優(yōu)點(diǎn)：支持高度自適應(yīng)；可適應(yīng)響應(yīng)式環(huán)境；適用于多個(gè)子元素水平垂直居中環(huán)境；兼容性好；
不足：需要額外標(biāo)簽

04行內(nèi)塊

基本思路：將子容器和任一偽元素設(shè)置為行內(nèi)塊及水平居中，然后對(duì)父容器文本居中，示意圖如下：

代碼如下：

<div id="parent4">
        <div id="son4"></div>
    </div>

#parent4{
    width: 500px;
    height: 250px;
    text-align: center;
    overflow: auto;
    background-color: rgb(46,95,62);
}

#parent4:after{
    content: '';
    display: inline-block;
    vertical-align: middle;
    height: 100%;
    width: 0;
}

#son4{
    width: 250px;
    height: 150px;
    display: inline-block;
    vertical-align: middle;
    background-color: rgb(23,48,31);
}

優(yōu)點(diǎn)：支持子元素高度自適應(yīng)；適應(yīng)于多個(gè)子元素水平垂直居中環(huán)境；兼容性良好，IE7及以上支持
不足：當(dāng)存在多個(gè)子容器時(shí)，注意盒子之間的間隙

05伸縮盒模型

基本思路：使用flexbox彈性盒模型設(shè)置居中，示意圖如下：

代碼如下：

<div id="parent5">
        <div id="son5"></div>
    </div>

#parent5{
    width: 500px;
    height: 300px;
    background-color: rgb(46,95,62);
    display: flex;
    align-items: center;
    justify-content: center;
}

#son5{
    width: 250px;
    height: 150px;
    background-color: rgb(23,48,31);
}

優(yōu)點(diǎn)：不需要設(shè)置子元素的寬高；適用于任意子元素水平垂直居中環(huán)境；提供更開闊和便捷的布局思想；代碼量少；（(?>ω<*?)
自己比較喜歡的一個(gè)方法）
不足：IE10及以上兼容，高級(jí)瀏覽器也部分存在兼容問題；需要添加瀏覽器私有前綴；可能存在性能問題。

06絕對(duì)居中塊

基本思路：設(shè)置子元素外邊距auto及四個(gè)方向的偏移值為0做到水平垂直居中，示意圖如下：

代碼如下：

<div id="parent6">
        <div id="son6"></div>
    </div>

#parent6{
    width: 500px;
    height: 300px;
    background-color: rgb(46,95,62);
    position: absolute;
}

#son6{
    width: 50%;
    height: 50%;
    background-color: rgb(23,48,31);
    margin: auto;
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;  
}

優(yōu)點(diǎn)：支持IE8及以上；代碼量少，便簽結(jié)構(gòu)簡(jiǎn)單；通過用%設(shè)置寬高值實(shí)現(xiàn)適用于響應(yīng)式環(huán)境的目的
不足：高度必須定義

07外插入一個(gè)空元素&利用浮動(dòng)

基本思路：
通過定義一個(gè)子元素，把它的高定義為50%，寬隨意，設(shè)置margin-bottom達(dá)到絕對(duì)居中，示意圖如下：

代碼如下：

<div id="parent7">
        <div id="floater"></div>
        <div id="content7"></div>   
    </div>

#parent7{
    width: 500px;
    height: 300px;
    background-color: rgb(46,95,62);
}

#content7{
    clear: both;
    height: 150px;
    position: relative;
    width: 50%;
    margin: auto;
    background-color: rgb(23,48,31);
}

#floater{
    background-color: #ccc;
    float: left;
    margin-bottom: -75px;
    height: 50%;
    width: 50px;
}

優(yōu)點(diǎn)：使用于大多數(shù)瀏覽器（包括IE8及以上）；沒有足夠的空間時(shí)（如：窗口縮小），content不會(huì)被截?cái)?/p>

不足：需要額外的空元素；用到了浮動(dòng)，容易影響整體布局

主要都是老師的內(nèi)容照搬照抄，一些地方加入了自己的理解，方便查閱。