未知尺寸元素水平垂直居中:

瀏覽器參照基準：Firefox, Chrome, Safari, Opera, IE

* 該未知尺寸元素水平垂直居中方案基於 inline-block 元素的 vertical-align:middle 特性實現，在這裏須要對 line box 及 vertical-align 的應用狀況有必定的瞭解

/*水平居中*/
text-align:center

vertical-align知識點

vertical-align適用於 inline level, inline-block level 及 table-cells 元素上

* 全部主流瀏覽器均支持 vertical-align 屬性，因此使用該屬性來實現垂直居中是一個不錯的想法；

<table><tbody>
    <tr>
        <td>水平垂直居中的隨意內容</td>
        <td>水平垂直居中的隨意內容</td>...

* 全部主瀏覽器均支持；若是使用table來實現垂直居中，則你只須要如上便可，不論你的td設置爲多高，裏面的內容均會垂直居中，由於單元格默認就是 vertical-align:middle 的；

<!--display:table-cell實現-->
<div id="demo">
    <p>水平垂直居中的隨意內容</p>
</div>
#demo{
    display:table;
    width:500px;
    margin:10px auto;
    background:#eee;
}
#demo p{
    display:table-cell;
    height:100px;
    vertical-align:middle;
}

* 既然table能實現，天然也就會想到將 display 設置爲table系value來實現。固然，該方案是有侷限性的，由於IE8如下的瀏覽器不支持 display 的table系value，因此你只能在IE8及以上瀏覽器以及非IE瀏覽器下才能看到效果；

<!--inline-block實現-->
<div id="demo">
    <p>水平垂直居中的隨意內容</p>
</div>
#demo{
    height:100px;
    text-align:center;
}
#demo:after{
    display:inline-block;
    width:0;
    height:100%;
    vertical-align:middle;
    content:'';
}
#demo p{
    display:inline-block;
    vertical-align:middle;
}

* 首先要了解垂直方向的對齊排版需使用 vertical-align ^#2，而且只應用於inline level, inline-block level 及 table-cells 元素上；其次 vertical-align 的對齊就基於每一個 line box（行框） 的，簡單的說，inline level元素按照 Normal flow 水平排版出一行就會造成一個line box，其高度由內容造成，若是換行，則又是另外一個line box，全部一段文本可能會分佈在多個line box裏，這些不重疊的line box被稱做爲a vertical stack of line boxes（一個垂直堆疊的線框集合）這些。

* 換句話說，咱們的垂直居中是要在每一個line box中進行處理。而上例中咱們想讓一行文本在名叫demo的高100px的容器裏垂直居中，這時有個問題就是demo容器並不是該行文本的line box，因此就算定義vertical-laign爲middle也沒法讓該行文本在demo容器中垂直居中。咱們知道line box的高度是由內容造成的，這時咱們能夠額外建立一個與該行文本處於同一line box的元素，同時將新增元素的高度定義爲與demo容器相同，此時line box的高度將與demo一致，文本將會在line box內垂直居中，即一樣實現了在demo容器中垂直居中。本例咱們使用僞對象::after來建立那個新增元素，能夠設置新增元素爲不可見。

* 固然，該方案也是有侷限性的，由於IE8如下的瀏覽器不支持僞對象::after

<div id="demo">
    <p>水平垂直居中的隨意內容</p>
    <!--[if lt IE 8]><span></span><![endif]-->
</div>
#demo{
    height:100px;
    text-align:center;
}
#demo:after,#demo span{
    display:inline-block;
    *display:inline;
    *zoom:1;
    width:0;
    height:100%;
    vertical-align:middle;
}
#demo:after{
    content:'';
}
#demo p{
    display:inline-block;
    *display:inline;
    *zoom:1;
    vertical-align:middle;
}

* 因爲IE8如下瀏覽器不支持僞對象::after，因而咱們經過IE條件註釋爲IE8如下瀏覽器新增一個額外元素span，其做用等同 inline-block ^#5 中的::after。本例支持全部主瀏覽器。

<!--inline-block實現可能會碰到的杯具-->
<div id="demo">
    <p>這是一個失敗的水平垂直居中實例</p>
    <!--[if lt IE 8]><span></span><![endif]-->
</div>

* 其實若是理解了line box概念，寫上述2個例子時，就確定知道會存在這個杯具。如上，CSS不變，只將文本變長。以前得以實現垂直居中，主要是將文本所在line box撐高了，而若是新增的元素被過長文本擠換行，則它們將再也不處於同一line box，那麼垂直居中將失效。你可能存疑，不是已將新增元素width設置爲0了嗎？怎麼還能被擠換行。這時你應該知道一個常識，inline level或inline-block level的元素之間的間隙問題，對此問題不作詳述，看看 @一絲 的這篇文章 inline-block 前世此生，應該能有個理性的認知。

<div id="demo">
    <p>這是一個終極實現的水平垂直居中實例</p>
    <!--[if lt IE 8]><span></span><![endif]-->
</div>
#demo{
    height:100px;
    text-align:center;
    font-size:0;
}
#demo:after,#demo span{
    display:inline-block;
    *display:inline;
    *zoom:1;
    width:0;
    height:100%;
    vertical-align:middle;
}
#demo:after{
    content:'';
}
#demo p{
    display:inline-block;
    *display:inline;
    *zoom:1;
    vertical-align:middle;
    font-size:16px;
}

* 這裏只是相應簡單的處理了一下inline-block的間隙，能夠搞定目前全部的主瀏覽器，特殊狀況的話，能夠處理的更精細些。但該原理是 inline-block 實現原理的終解。