文字垂直居中是前端常常遇到的一个问题（关于其他任意元素垂直水平居中可以 Google 各种解决方案，其中一个 absolute 的方法比较奇特，我其实是很想用 CSS3 的解决方案的...）。

在 CSS2.1 的时候的解决方案就是设置 height = lineHeight 就 OK 了，所以 Baidu 上绝大部分方案都是这样的。但是现在你可能会发现，虽然进行了这样的设置，但是文字明显偏下了，原因就是 line-height 的高度大于 “height” 的高度了！

今天在 console 解决这个问题的时候，偶然发现当我把 line-height 设置成 content 的高度（蓝色区域）的时候，文字就垂直居中了！

因为现在我们很多的 CSS 在 Reset 的时候都会把 box-sizing 设置成 "border-box"，这样就导致了 height 并不总是等于 content 的高度！所以，当 lineHeight = height - borderWidth - padding 的时候，line-height 的高度才等于 content 的高度，文字才垂直居中！所以在设置上要注意一下喽。

希望对像我一样的菜鸟们有所帮助，哈哈！

扫码关注w3ctech微信公众号