摘要：可以試試去掉的會(huì)發(fā)生很奇妙的事呢附加關(guān)于子元素設(shè)置為而引發(fā)的問題。附加關(guān)于開啟硬件加速提升網(wǎng)站動(dòng)畫渲染性能問題。合并后的外邊距的高度等于兩個(gè)發(fā)生合并的外邊距的高度中的較大者。

這可以說是最經(jīng)典的問題了，水平垂直居中，這個(gè)問題從入門前端一直到面試，甚至到工作之后都會(huì)時(shí)不時(shí)遇到，最近的面試也被問過這之類的問題，這里還是好好總結(jié)一番，以作備忘。公用 HTML 部分：

設(shè)置子元素 position 為 absolute ，然后讓 top 和 left 都為 50%，再使 margin 為子元素的長(zhǎng)和寬的負(fù) 1/2 即可：

說明： 這種方法局限性很大，不做推薦。  
注意： 此處父元素得添加 postion:relative/absolute ，因?yàn)?absolute 定位是基于最近的設(shè)有 position 的父元素進(jìn)行定位，如果父元素沒有設(shè)置 position ，則其會(huì)基于 body 定位。但是如果 body 也沒有的設(shè)置 position 的話則基于視口高度計(jì)算位置：document.documentElement.clientHeight 。可以試試去掉 parent 的 position 會(huì)發(fā)生很奇妙的事呢！

附加： 關(guān)于子元素 position 設(shè)置為 relative 而引發(fā)的問題。如果此時(shí)父元素的 position 為 absolute，那么不會(huì)有什么奇怪的現(xiàn)象發(fā)生；但是如果此時(shí)父元素的 position 為 relative ，那么你會(huì)發(fā)現(xiàn)父元素會(huì)向上方移動(dòng)一點(diǎn)距離,這又是為什么呢？？？這涉及到外邊距塌陷（margin-collapse）問題了，這點(diǎn)在后面的一些2. 外邊距問題中去解釋了（提前透露：父級(jí)向上移動(dòng)了-50px）。
推薦指數(shù)：　★

#parent {
    background-color: black;
    position: relative;        /*或者absolute*/
    height: 300px;
    width: 300px;
}

#child {
    background-color: #ccc;
    position: absolute;
    left: 50%;
    top: 50%;
    margin: -50px 0 0 -50px;
    height: 100px;
    width: 100px;
}

CSS里面還有一種 display: table-cell 的屬性，我們可以將父元素的 display 設(shè)置為 table-cell 屬性，然后將子元素的 display 設(shè)置為 inline 或者 inline-block ，此時(shí)便可以用我們熟悉的 text-align: center 和 vertical-align: middle 來使得子元素水平垂直居中了。

說明： 這種方法最適合子元素都為行內(nèi)元素（或者帶有行內(nèi)元素性質(zhì)的塊級(jí)元素）的布局，故而可以根據(jù)情況選用。

推薦指數(shù)：　★★★☆

#parent {
    background-color: black;
    display: table-cell;
    text-align: center;
    vertical-align: middle;
    height: 300px;
    width: 300px;
}

#child {
    background-color: #ccc;
    display: inline-block;
    height: 100px;    /*可以改為33.3%*/
    width: 100px;    /*可以改為33.3%*/
}

方法一中只能解決子元素定大小問題，有時(shí)候子元素大小變化可以用以下方法解決：

說明： 這種方法非常棒，兼容性也很不錯(cuò)，強(qiáng)推！

附加： 關(guān)于子元素的 position 設(shè)為 relative 而使得垂直居中無效問題。關(guān)于這個(gè)問題其實(shí)很好理解，因?yàn)椋琾ostion: relative 的移動(dòng)是基于自身原本的位置嘛，top 、 bottom 、 left 、 right 都為 0 ，換句話說就是位置不動(dòng)，然而，你有見過塊級(jí)元素能夠 margin: auto 上下自動(dòng)補(bǔ)齊的嗎！沒有吧~ 故而起作用的只有左右自動(dòng)計(jì)算補(bǔ)齊而已，也就只有水平居中對(duì)齊了！
推薦指數(shù)：　★★★★★

#parent {
    background-color: black;
    position: relative;
    height: 300px;
    width: 300px;
}

#child {
    background-color: #ccc;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    height: 33.3%;
    width: 33.3%;
}

由于CSS3的來臨，我們也應(yīng)該跟上時(shí)代的潮流，故而對(duì)上述方法有有所改進(jìn)，在此我們可以嘗試一下 transform 元素的 translate 2D 平移，讓其想著 X 、Y 軸負(fù)方向移動(dòng)自身長(zhǎng)度的一半距離即可達(dá)到效果。

說明： 畢竟技術(shù)向新的方向發(fā)展，可以多嘗試一下新技術(shù)，推薦。

注意： 由于瀏覽器的支持性問題，使用的時(shí)候可以檢測(cè) CSS 支持性，也可以通過 Autoprefixer CSS online 來寫兼容性代碼。
附加： 關(guān)于 CSS3 開啟 GPU 硬件加速提升網(wǎng)站動(dòng)畫渲染性能問題。這一點(diǎn)不知道對(duì)此位置平移轉(zhuǎn)換有沒幫助，不過當(dāng)做是拓展來介紹了，在此我就不詳細(xì)說了，推薦 CSS3 頁(yè)面渲染加速。
推薦指數(shù)： ★★★★

#parent {
    background-color: black;
    position: relative;
    height: 300px;
    width: 300px;
}

#child {
    background-color: #ccc;
    position: absolute;        /*或者relative*/
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    height: 33.3%;
    width: 33.3%;
}

這個(gè)是另外一種 CSS3 的解決方法（我比較喜歡），即 flex 布局。通過設(shè)置父元素的 display 屬性為 flex，然后設(shè)置其 align-content 和 justify-content 來使得子元素能夠水平垂直居中。

說明： 這個(gè)方法在布局上非常靈活，在不考慮兼容的情況下，強(qiáng)烈推薦此方法進(jìn)行布局。這真的是個(gè)非常棒的布局方法！

注意： 由于瀏覽器的支持性問題，使用的時(shí)候可以檢測(cè) CSS 支持性，也可以通過 Autoprefixer CSS online 來寫兼容性代碼。
附加： 關(guān)于flex的詳細(xì)介紹可以參考阮老師的博客： Flex 布局語(yǔ)法篇和 Flex 布局實(shí)例篇。
推薦指數(shù)： ★★★★☆

#parent {
    background-color: black;
    display: flex;
    display: -webkit-flex;  /*Safari*/
    align-content: center;
    -webkit-align-items: center;
    justify-content: center;
    -webkit-justify-content: center;
    height: 300px;
    width: 300px;
}

#child {
    background-color: #ccc;
    height: 33.3%;
    width: 33.3%;
}

第一種情形是，當(dāng)你在一個(gè) div 元素內(nèi)插入一個(gè)塊級(jí)子元素，然后設(shè)置其 margin-top 值，這是你會(huì)發(fā)現(xiàn)并不是子元素在父元素內(nèi)撐開了一段距離，而是父元素向上撐開了一段距離。

原以為：                            實(shí)際上：
       body                                body
--------------------               --------------------
      parent                                *
    -----------                             | 50px
         *                                  *
         | 50px                           parent
         *                             -----------
       child                               child
    -----------                        -----------
      parent                              parent
--------------------               --------------------
       body                                body

另一種情況是，當(dāng)你在 div 元素內(nèi)插入多個(gè)塊級(jí)元素，你給其中相鄰的兩個(gè)設(shè)置 margin-top 和 margin-bottom ，你會(huì)發(fā)現(xiàn)，他們之間的距離為相對(duì)應(yīng)的 margin-top 和 margin-bottom 中的最大值，當(dāng)設(shè)置第一個(gè)塊級(jí)元素的 margin-top 屬性則會(huì)像第一種情形那樣，父級(jí)框移動(dòng)了。

原以為：
        parent
------------------------
          | 10px
        childA
          | 10px ==> | 30px
          | 20px ==> |
        childB
          | 20px
------------------------
        parent

實(shí)際上：
        body
--------------------------
          | 10px
        parent
    ----------------
        childA
          | max(10px, 20px) ==> 20px
        childB
          | 20px
    ----------------
        parent
--------------------------
        body

詳細(xì)解答在官方文檔的 8.3.1 合并 margin 這一節(jié)，太長(zhǎng)了，我就不復(fù)制了，但是簡(jiǎn)單來說可以用W3C上的話來總結(jié)：

外邊距合并指的是，當(dāng)兩個(gè)垂直外邊距相遇時(shí)，它們將形成一個(gè)外邊距。

合并后的外邊距的高度等于兩個(gè)發(fā)生合并的外邊距的高度中的較大者。

這樣就清楚了！下面說說我的理解（很實(shí)用）：

Case 1：
父親與兒子并排站（沒邊界嘛，父親位置不定），兒子說：我站在相對(duì)前方目標(biāo) 1m 的地方，問：父親站在離前方目標(biāo)多遠(yuǎn)處？

顯然是 1m 的地方嘛！因?yàn)槟繕?biāo)不明確（父親也是相對(duì)嘛），故而父親同樣也是站在相對(duì)前方 1m 處。

Case 2：
ChildA： 我站在距離 ChildB 1m 的位置。

ChildB： 我站在距離 ChildA 1m 的位置。
問： ChildA、ChildB距離多遠(yuǎn)？
根據(jù)相對(duì)性，這不就是 1m 嘛！
依次類比，很相似吧（沒邊界擋著 == 站在同一起跑線）！ (σ???)σ..:*☆ 哎喲不錯(cuò)哦！?。?/p> 問題解決

其實(shí)分析時(shí)已經(jīng)表明了，因?yàn)槎颊驹谕黄鹋芫€，故而大家都不分先后，要讓它們分開，設(shè)置點(diǎn)障礙就行了，如：
情況 1：
Method 1: 給父元素添加 border: 1px solid #xxxxxx（劃分界限，父子沒并排站，兒子前方有了目標(biāo)）。
Method 2: 給父元素添加 overflow: hidden 屬性（相當(dāng)于父級(jí)給自己定了一個(gè)隱藏邊界）。
Method 3：讓父元素為絕對(duì)定位（因?yàn)橄喈?dāng)于讓父元素站在一個(gè)定點(diǎn)，子元素的前方目標(biāo)明確了，是父親相對(duì)自己距離為 0，距離也就拉開了）。
Method 4：為父元素聲明浮動(dòng)（浮動(dòng)會(huì)脫離文檔流，此時(shí)瀏覽器會(huì)給頂元素位置，即所能達(dá)到的最左上方）。

個(gè)人推薦： Method 2。

這個(gè)情況可以說是前一個(gè)情況的完整版，其實(shí)整體上就是BFC問題（前者也是），BFC的詳細(xì)內(nèi)容我就不細(xì)說了，推薦 BFC 神奇背后的原理。
情況 2：
首先得讓父級(jí)元素按照情況 1中方式處理，其次是處理子元素。
Method 1：自己計(jì)算好相鄰元素的距離，然后直接設(shè)置。
Method 2：給每個(gè)子元素添加一個(gè) wrapper ，使得每個(gè)子元素都是 BFC 區(qū)域。

個(gè)人推薦： Method 2。

當(dāng)你在 div 元素內(nèi)插入多個(gè)行內(nèi)塊級(jí)元素，你給其中任意一個(gè)或者多個(gè)設(shè)置 margin-top 想要使得它/它們表現(xiàn)得與眾不同，可是，到頭來所有元素都會(huì)移動(dòng)，而且唯一準(zhǔn)確的只有所設(shè)值最大的那個(gè)子元素，其他子元素則混淆。

（注：所有子元素高度為 height: 50px）
原以為：
                      parent
----------------------------------------------------
        | 50px        childB               | 25px
      childA                            childC
----------------------------------------------------
                      parent

實(shí)際上：
                      parent
----------------------------------------------------
        | 50px          | 50px + 25px      | 50px - 25px
      childA          childB            childC
----------------------------------------------------
                      parent

其實(shí)這個(gè)問題和IFC問題很相似，也就是行內(nèi)元素基線的選擇問題。 IFC 的介紹中有這么一段話：

IFC ( Inline Formatting Contexts )直譯為"內(nèi)聯(lián)格式化上下文"，IFC 的 line box（線框）高度由其包含行內(nèi)元素中最高的實(shí)際高度計(jì)算而來（不受到豎直方向的 padding/margin 影響)

IFC 中的 line box 一般左右都貼緊整個(gè) IFC ，但是會(huì)因?yàn)?float 元素而擾亂。

這就說到很明白了。由于這里是 display: inline-block 故而，其線框高度包含了 margin 、 border 、 padding 、 content ，這樣就知道為什么其他元素的 margin 后的結(jié)果與預(yù)期不一致的問題了。（此處把 childC 的高度變?yōu)?300xp 則是以 childC 的基線為基準(zhǔn)定位其他兄弟元素，因?yàn)榇藭r(shí) childC “最高”）。

友情推薦： 什么是 BFC 、IFC 、GFC 和 FFC

要解決這個(gè)問題，想讓不同子元素呈現(xiàn)不同效果，我們可以給每個(gè)子元素添加一個(gè) wrapper ，并讓 wrapper 以 BFC 的形式包裹子元素，然后你就可以肆無忌憚的改變每個(gè)子元素位置了?。▍⒖?. 水平垂直居中問題）

/*wrapper style*/
.wrapper {
    display: inline-block;
    height: 100%;       /*讓 wrapper 基線對(duì)齊*/
    overflow: hidden;   /* BFC */
}

其他問題： 為什么其他子元素的 margin: mpx 不是在基線上位置向下移動(dòng) mpx 而是向上移動(dòng)呢？（m > 0）

這個(gè)問題其實(shí)也很好說明，由于此處默認(rèn)對(duì)齊方式是都是基于 bottom 的，故而都是在 bottom 這條起始線開始變化（可以打開瀏覽器看盒子模型）， childB 由于沒有 margin 故而其底邊線為此時(shí)公用的底邊界，其他盒子在此基礎(chǔ)上有 margin-bottom 的開始向上移動(dòng)（“最高”的盒子會(huì)撐高整個(gè)高度，其它盒子只會(huì)上升 margin-bottom 值），因此會(huì)出現(xiàn)此現(xiàn)象。