引：

http://demo.doyoe.com/css/alignment/

上面提及一种垂直居中的方法

`.wrap {width:500px;height:300px;border:1px solid #ccc;}

.wrap:after {display:inline-block;width:0;height:100%;vertical-align:middle;content:'';}

.inner {display:inline-block;vertical-align:middle;}`

完美，真的垂直居中了，当设置.inner宽度为100%，或者.inner中的文字长到足以换行时，垂直居中失效了，设置宽度99%又能垂直居中。

问题：

失效 这一过程是怎么出现的？

抱歉，这个问题不该出现，但由于我没仔细看完全文......

文章提到了问题所在

• 其实如果理解了line box概念，写上述2个例子时，就肯定知道会存在这个杯具。如上，CSS不变，只将文本变长。之前得以实现垂直居中，主要是将文本所在line box撑高了，而如果新增的元素被过长文本挤换行，则它们将不再处于同一line box，那么垂直居中将失效。你可能存疑，不是已将新增元素width设置为0了吗？怎么还能被挤换行。这时你应该知道一个常识，inline level或inline-block level的元素之间的间隙问题，对此问题不做详述，看看 @一丝 的这篇文章 inline-block 前世今生，应该能有个理性的认知。

行内元素之间存在空隙，原因就是这点。

文章也给出了解决方案：

wrap 设置 font-size:0;

inner 设置 font-size:Npx