在实际开发中，经常会有元素水平、垂直居中的需求。当子元素、父元素的高度均可变时，使用flex真是不二之选，但flex在老旧浏览器中不兼容，因此，这里介绍一种使用vertical-align、inline-block实现垂直居中的方法。
请看下方代码：
<style>
.wrapper {
height: 200px;
background-color: lightgreen;
}
.wrapper:before {
content: '';
display: inline-block;
width: 0;
height: 100%;
vertical-align: center;
}
.content {
display: inline-block;
width: 100%;
height: 100px;
vertical-align: center;
background-color: lightcoral;
}
</style>
<body>
<div class='wrapper'>
<div class='content'></div>
</div>
</body>
在浏览器中打开，结果如下图：
juzhong.png
然后，我们发现，垂直方向已经实现了居中，而且这种方法的兼容性极好，IE8以上的全部兼容，并且无需修改dom结构，父、子元素的高度均为可变，另外，子元素使用inline-block，还顺带触发了BFC，虽然不一定需要。
而如果实在需要兼容远古时代的IE6，可以不使用
:before伪类，直接在父元素里面加上一个子元素替代:before。
关于此方法的理论解释，这篇博文有提到：vertical-align实现垂直居中，而她的实现，还不完整，于是便有了我这篇博文。还请继续往下翻阅。
然而... ...细心的你一定发现了，红色方块（子元素）左侧离父元素的左边框有间隙。经过各种排查，却发现并没有任何margin或者padding... ...
这间隙，便是今天要说的 “坑”。
下面将解释
行内块元素之间的默认间距
在遇到这个问题的时候，脑海里一闪而过，想起以前张鑫旭博客上的一篇文章：去处inline-block元素间间距的N种方法。
于是乎，将问题判定为是两个inline-block的默认间距。根据张老师博客中提供的N种方法，我从中挑选了一种兼容性好，且容易实现的方式。
具体如下：
<style>
.wrapper {
height: 200px;
background-color: lightgreen;
font-size: 0; /* 消除inline-block间的间隙 */
-webkit-text-size-adjust:none; /* 解除移动端最小字体为12px的限制 */
}
.wrapper:before {
content: '';
display: inline-block;
width: 0;
height: 100%;
vertical-align: center;
}
.content {
display: inline-block;
width: 100%;
height: 100px;
vertical-align: center;
background-color: lightcoral;
font-size: 12px; /* 需要重新设置字体 */
}
</style>
<body>
<div class='wrapper'>
<div class='content'></div>
</div>
</body>
上方带有注释的三句代码即为修复之后的代码，在浏览器中打开，一切正常...
juzhong2.png
网友评论