引：
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