未知尺寸元素水平垂直居中实现详解
Figure 1:水平居中知识点
text-align:center
* 对于水平居中可能不需要太多的介绍，所有主流浏览器均支持
text-align 属性，只需要取值 center 即可；
Figure 2:vertical-align知识点
vertical-align适用于 inline level, inline-block level 及 table-cells 元素上
* 所有主流浏览器均支持
vertical-align 属性，所以使用该属性来实现垂直居中是一个不错的想法；
Figure 3:table实现
DEMO水平垂直居中的随意内容 水平垂直居中的随意内容...
* 所有主浏览器均支持；如果使用table来实现垂直居中，则你只需要如上即可，不论你的td设置为多高，里面的内容均会垂直居中，因为单元格默认就是 vertical-align:middle 的；
Figure 4:display:table-cell实现
DEMO水平垂直居中的随意内容
#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实现
DEMO水平垂直居中的随意内容
#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;}
* 首先要了解垂直方向的对齐排版需使用 ，并且只应用于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以下的浏览器不支持伪对象
::afterFigure 6:inline-block实现2
DEMO水平垂直居中的随意内容
#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，其作用等同 中的::after。本例支持所有主浏览器。
Figure 7:inline-block实现可能会碰到的杯具
DEMO这是一个失败的水平垂直居中实例
* 其实如果理解了line box概念，写上述2个例子时，就肯定知道会存在这个杯具。如上，CSS不变，只将文本变长。之前得以实现垂直居中，主要是将文本所在line box撑高了，而如果新增的元素被过长文本挤换行，则它们将不再处于同一line box，那么垂直居中将失效。你可能存疑，不是已将新增元素
width设置为0了吗？怎么还能被挤换行。这时你应该知道一个常识，inline level或inline-block level的元素之间的间隙问题，对此问题不做详述，看看 @一丝 的这篇文章
inline-block 前世今生，应该能有个理性的认知。
Figure 8:inline-block终解
DEMO这是一个终极实现的水平垂直居中实例
#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 实现原理的终解。
Web前端
公众公开
Figure 1:水平居中知识点
text-align:center
* 对于水平居中可能不需要太多的介绍，所有主流浏览器均支持
text-align 属性，只需要取值 center 即可；
Figure 2:vertical-align知识点
vertical-align适用于 inline level, inline-block level 及 table-cells 元素上
* 所有主流浏览器均支持
vertical-align 属性，所以使用该属性来实现垂直居中是一个不错的想法；
Figure 3:table实现
DEMO水平垂直居中的随意内容 水平垂直居中的随意内容...
* 所有主浏览器均支持；如果使用table来实现垂直居中，则你只需要如上即可，不论你的td设置为多高，里面的内容均会垂直居中，因为单元格默认就是 vertical-align:middle 的；
Figure 4:display:table-cell实现
DEMO水平垂直居中的随意内容
#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实现
DEMO水平垂直居中的随意内容
#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;}
* 首先要了解垂直方向的对齐排版需使用 ，并且只应用于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以下的浏览器不支持伪对象
::afterFigure 6:inline-block实现2
DEMO水平垂直居中的随意内容
#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，其作用等同 中的::after。本例支持所有主浏览器。
Figure 7:inline-block实现可能会碰到的杯具
DEMO这是一个失败的水平垂直居中实例
* 其实如果理解了line box概念，写上述2个例子时，就肯定知道会存在这个杯具。如上，CSS不变，只将文本变长。之前得以实现垂直居中，主要是将文本所在line box撑高了，而如果新增的元素被过长文本挤换行，则它们将不再处于同一line box，那么垂直居中将失效。你可能存疑，不是已将新增元素
width设置为0了吗？怎么还能被挤换行。这时你应该知道一个常识，inline level或inline-block level的元素之间的间隙问题，对此问题不做详述，看看 @一丝 的这篇文章
inline-block 前世今生，应该能有个理性的认知。
Figure 8:inline-block终解
DEMO这是一个终极实现的水平垂直居中实例
#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 实现原理的终解。
