【推荐】未知尺寸元素水平垂直居中终解（支持全部浏览器，简单好用）

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;
}