【推薦】未知尺寸元素水平垂直居中終解（支持全部瀏覽器，簡單好用）

Figure 1: 水平居中知識點

text-align:center

對於水平居中可能不須要太多的介紹，全部主流瀏覽器均支持 text-align 屬性，只須要取值 center 便可。

Figure 2: vertical-align 知識點

vertical-align: top|middle|bottom

vertical-align 適用於 inline level, inline-block level 及 table-cells 元素上。
全部主流瀏覽器均支持 vertical-align 屬性，因此使用該屬性來實現垂直居中是一個不錯的想法；

Figure 3: table方式實現

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

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

Figure 4: 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瀏覽器下才能看到效果。

Figure 5: 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 。

Figure 6: inline-block實現2

<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。本例支持全部主瀏覽器。

Figure 7: 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 前世此生，應該能有個理性的認知。

Figure 8: 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 實現原理的終解。

Figure 9: 附加一個個人 inline-block 終解2

在 Figure8 的終解中，使用了 font-size:0 來解決 inline-block 默認間距形成最後一個佔位元素被換行問題，可是這樣有一個弊端：因爲父元素設置了 font-size:0，所以子元素內容必須從新定義 font-size，不利於全局的 font-size 定義。

對於這個問題其實只要保證佔位元素不被換行便可，只要簡單的在父元素上設置 white-space:nowrap; 樣式定義，便可保證其 inline-block 子元素始終排成一排而不換行，而只需在子元素設置 white-space:normal; 便可保證子元素的內容正常換行 。終解代碼以下：

<div id="demo">
	<p>這是一個終極實現的水平垂直居中實例</p>
	<!--[if lt IE 8]><span></span><![endif]-->
</div>
#demo{
	height:100px;
	white-space:nowrap;
}
#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;
	white-space:normal;
}

或者整理成通用的解決樣式：

<div id="demo">
	<p class="inline">這是一個終極實現的水平垂直居中實例</p>
	<span class="_vm_actor"></span>
</div>
/* .inline 和 ._vm_actor 樣式能夠做爲通用的 */
.inline, ._vm_actor {
	display:inline-block;
	*display:inline;
	*zoom:1;
	vertical-align:middle;
}
._vm_actor {
	width:0;
	height:100%;
	font-size:0;
	padding:0;
	margin:0;
}

#demo{
	height:100px;
	white-space:nowrap;
}
#demo p{
	white-space:normal;
}