在實(shí)際開發(fā)中，經(jīng)常會(huì)有元素水平、垂直居中的需求。當(dāng)子元素、父元素的高度均可變時(shí)，使用flex真是不二之選，但flex在老舊瀏覽器中不兼容，因此，這里介紹一種使用vertical-align、inline-block實(shí)現(xiàn)垂直居中的方法。
請(qǐng)看下方代碼：
<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>
在瀏覽器中打開，結(jié)果如下圖：
然后，我們發(fā)現(xiàn)，垂直方向已經(jīng)實(shí)現(xiàn)了居中，而且這種方法的兼容性極好，IE8以上的全部兼容，并且無需修改dom結(jié)構(gòu)，父、子元素的高度均為可變，另外，子元素使用inline-block，還順帶觸發(fā)了BFC，雖然不一定需要。
而如果實(shí)在需要兼容遠(yuǎn)古時(shí)代的IE6，可以不使用
:before偽類，直接在父元素里面加上一個(gè)子元素替代:before。
關(guān)于此方法的理論解釋，這篇博文有提到：vertical-align實(shí)現(xiàn)垂直居中，而她的實(shí)現(xiàn)，還不完整，于是便有了我這篇博文。還請(qǐng)繼續(xù)往下翻閱。
然而... ...細(xì)心的你一定發(fā)現(xiàn)了，紅色方塊（子元素）左側(cè)離父元素的左邊框有間隙。經(jīng)過各種排查，卻發(fā)現(xiàn)并沒有任何margin或者padding... ...
這間隙，便是今天要說的 “坑”。
下面將解釋
行內(nèi)塊元素之間的默認(rèn)間距
在遇到這個(gè)問題的時(shí)候，腦海里一閃而過，想起以前張?chǎng)涡癫┛蜕系囊黄恼拢?a target="_blank" rel="nofollow">去處inline-block元素間間距的N種方法。
于是乎，將問題判定為是兩個(gè)inline-block的默認(rèn)間距。根據(jù)張老師博客中提供的N種方法，我從中挑選了一種兼容性好，且容易實(shí)現(xiàn)的方式。
具體如下：
<style>
.wrapper {
height: 200px;
background-color: lightgreen;
font-size: 0; /* 消除inline-block間的間隙 */
-webkit-text-size-adjust:none; /* 解除移動(dòng)端最小字體為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; /* 需要重新設(shè)置字體 */
}
</style>
<body>
<div class='wrapper'>
<div class='content'></div>
</div>
</body>
上方帶有注釋的三句代碼即為修復(fù)之后的代碼，在瀏覽器中打開，一切正常...
