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

首先讨论在IE8以上（也就是支持伪元素after的基础上）的2种情况

当有一段不知道长度大小的文字在你面前，你需要使它垂直居中的时候，你肯定会想到：
1、text-align:center;水平居中没错。
2、垂直居中，可以使用绝对定位，margin-left,margin-top负值在这里可以实现吗？答案是不可以，因为文字多少你不知道。那么绝对定位就不好使了。
3、还有人应该想到line-height:;这种情况下但是如果这个文字换行了呢？所以也不行。

那么接下来就是要说的这个问题了，使用display:inline-block;可以实现兼容IE6以上。

那么什么是display:inline-block;？我们来了解了解。。。
早在 IE 5.5 就开始支持 inline-block了，同时我们知道 IE6、7 中 display:inline-block 是可以触发 hasLayout 的，触发了 hasLayout 的元素表现出来的特征就是一个独立的矩形容器，可以设置宽高而且不受外部元素的影响。

：inline-block 后的元素创建了一个行级的块容器，该元素内部（内容）被格式化成一个块元素，同时元素本身则被格式化成一个行内元素。直白一点的意思就是：inline-block 的元素既具有 block 元素可以设置宽高的特性，同时又具有 inline 元素默认不换行的特性。当然不仅仅是这些特性，比如 inline-block 元素也可以设置 vertical-align 属性。简而言之： inline-block 后的元素就是一个格式化为行内元素的块容器( Block container )

请看IE8以上使行内元素垂直居中的效果。。。

我是一段未知大小的文字。

 

代码如下：

当元素发生换行之后，应该这样处理。。。

我是一段未知大小的文字。如果我是一个长文本的话，会发生什么呢？

 

代码如下：

为什么要这样处理呢？你应该想到，既然是换行了，那就是说明我的这个伪元素after和这段文字不在一个line box里了，应该被挤下去了，如图：

有人肯定也已经发现，width已经被设置为0了，应该不会被挤下去啊？这就涉及到了inline-block使元素之间产生间隙，而IE6、7，IE8（Q）中：inline 元素会产生空隙，block 元素不会产生空隙。也就是说，因为这个间隙的存在，就把我这个伪元素参照物给挤下去了。

在我们这里的处理是，将父级的字体设置为0，将元素的字体设置为正常，就可以去除inline-block产生的间隙。

产生间隙的根本原因是：HTML 中的换行符、空格符、制表符等产生了空白符，而这些归根结底都是字符，那么它们的大小都是受 font-size 来控制的，字体大小直接导致 inline 或者 inline-block 后元素之间空隙的大小，把 inline-block 元素间的空隙认为总是某个固定大小是错误的。

这只是在IE8以上的浏览器上，但是，IE8 以上支持 font-size:0; IE6、7 inline 元素 inline-block 后设置 font-size:0 始终有 1px 的空隙。这里就要用到letter-spacing 和 word-spacing了。
letter-spacing : normal | length （检索或设置对象中的文字之间的间隔）
word-spacing : normal | length（检索或设置对象中的单词之间插入的空隔）

Safari 中 letter-spacing 负值的绝对值大于空隙大小后，内部会发生重叠。而word-spacing不会。那就好办了。

去除 inline-block 空隙终极解决方案

解决了inline-block的间隙问题，接着前面说的IE8及以下不支持伪元素的办法，我们可以在元素p后设置一个隐藏的span来当作参照物即可。

这是一段很长的文字，但不知道大小，又换行了，还是在IE8及以下的情况。IE8及以下才能看见居中。可以看到span标签只是个参照物，将line box的高度撑为100%。

代码如下：

终极代码：

参考 
未知尺寸元素水平垂直居中
inline-block 前世今生