vertical-align实现垂直居中的坑

在实际开发中，经常会有元素水平、垂直居中的需求。当子元素、父元素的高度均可变时，使用flex真是不二之选，但flex在老旧浏览器中不兼容，因此，这里介绍一种使用vertical-align、inline-block实现垂直居中的方法。

请看下方代码：

在浏览器中打开，结果如下图：

juzhong.png

然后，我们发现，垂直方向已经实现了居中，而且这种方法的兼容性极好，IE8以上的全部兼容，并且无需修改dom结构，父、子元素的高度均为可变，另外，子元素使用inline-block，还顺带触发了BFC，虽然不一定需要。

而如果实在需要兼容远古时代的IE6，可以不使用 :before伪类，直接在父元素里面加上一个子元素替代:before。

关于此方法的理论解释，这篇博文有提到：vertical-align实现垂直居中，而她的实现，还不完整，于是便有了我这篇博文。还请继续往下翻阅。

然而... ...细心的你一定发现了，红色方块（子元素）左侧离父元素的左边框有间隙。经过各种排查，却发现并没有任何margin或者padding... ...

这间隙，便是今天要说的 “坑”。
下面将解释

行内块元素之间的默认间距

在遇到这个问题的时候，脑海里一闪而过，想起以前张鑫旭博客上的一篇文章：去处inline-block元素间间距的N种方法。
于是乎，将问题判定为是两个inline-block的默认间距。根据张老师博客中提供的N种方法，我从中挑选了一种兼容性好，且容易实现的方式。
具体如下：

上方带有注释的三句代码即为修复之后的代码，在浏览器中打开，一切正常...

juzhong2.png