最近处理了一个字体图标没有在容器中垂直居中的样式问题。原本以为，只是 css 写的不正确，实际却并没有那么简单。
一番波折后，最终发现，是因为一处小细节，挖出了个大坑。
在处理问题的整个过程中，一方面复习了相关的 css 基础知识；另一方面，对于问题原因的推理方法上，也给了我一些新的启示，故特此记录下来。
起因
同事小 w 请教了我一个样式问题：他写的页面上，一处本该垂直居中的字体图标，变成了与容器顶部对齐，不知道是哪里 css 写的不对，
如图所示（由于事故现场已不存在，此处为模拟还原的场景）：
<div class='wrapper'>
<div class='inner'>
<i class="far fa-check-circle"></i>
</div>
</div>
css 如下：
.outer {
height: 60px;
line-height: 60px;
text-align: center;
color: white;
background-color: gray;
}
.inner {
display: inline-block;
font-size: 26px;
line-height: 1;
}
分析
可以看到，html 结构很简单，分为三部分，即外部容器.outer，内部容器.inner，以及字体图标本身。
外部容器将height于line-height同设为 60px，是经典的垂直居中的方法，然而，结果却并没有实现居中。
问题出在哪里了呢？
那么就先从垂直居中的原理来分析一下吧。
利用 line-height 垂直居中
我们经常说，“让height等于line-height可以实现垂直居中”。其实，这个说法本身，是有不少问题的。
首先，对于一个容器和一个内联元素来说，并不需要同时设置height和line-height，只要给容器设置line-height，就可以“垂直居中”了，如下图：
<div class='wrapper'>
<span class='text'>中文文本</span>
</div>
.wrapper {
margin-bottom: 20px;
line-height: 100px;
color: white;
background-color: gray;
text-align: center;
}
不需要设height很好理解，因为line-height也可以将容器高度撑开，此时的height的值为auto，自动计算成了line-height的值。
之所以会有“让height等于line-height”的说法，是因为最早这种做法是基于高度已经固定的容器，要使得其中的文本垂直居中，就需要设置容器的line-height等于高度。（所以也可以直接去掉高度，改为设置line-height）
但这里还有个问题，其实文本并没有真正的“垂直居中”，确切的说，是文本的“内容区域”居中了。如果给文本设置背景色，就可以看出其内容区域：
然而，这种幸运，对于
display: inline-block的元素来说，是不存在的。如下图：
<div class='wrapper'>
<span class='cube'></span>
</div>
.wrapper {
margin-bottom: 20px;
line-height: 100px;
color: white;
background-color: gray;
text-align: center;
}
.cube {
display: inline-block;
width: 50px;
height: 50px;
background-color: white;
}
设置 vertical-align
对于display: inline-block的元素，要使其垂直居中，我们通常会在元素上添加vertical-align: middle使其垂直居中,如图：
.wrapper {
margin-bottom: 20px;
line-height: 100px;
color: white;
background-color: gray;
text-align: center;
}
.cube {
display: inline-block;
width: 50px;
height: 50px;
background-color: white;
vertical-align: middle;
}
这是什么原理呢？
参考 w3c 对于vertical-align的定义，当设置为middle时：
Align the vertical midpoint of the box with the baseline of the parent box plus half the x-height of the parent.
翻译过来，就是说，vertical-align: middle的元素，会和父元素所用字体的 baseline 高度加上 x-height 的一半对齐，而这个值，其实就是小写字母 x 的中线的高度，如图：
由此也可以解释，如果不设置
vertical-align，即vertical-align: baseline时，为什么元素会偏高：参见
vertical-align: baseline的定义：
Align the baseline of the box with the baseline of the parent box. If the box does not have a baseline, align the bottom margin edge with the parent's baseline.
所以，元素块的底部，与 baseline 对齐，也就是字母 x 默认所处位置的那条线：
尝试修复
完成了以上的分析，再回头看最开始的问题，发现，作为内容器作为display: inline-block元素，没有添加vertical-align属性，于是我们加上它试试：
.wrapper {
height: 60px;
line-height: 60px;
text-align: center;
color: white;
background-color: gray;
}
.inner {
display: inline-block;
font-size: 26px;
line-height: 1;
vertical-align: middle;
}
发现并没有用。难道是因为只有一个字体图标，没有一个参照物的原因？（之前的中文字符不止一个字）
带着这种设想，在字体图标旁，添加一个字符试试，如下：
难道，要使图标居中，我一定要写个隐藏字符在图标旁边才行吗？为什么以前用类似方式，没有遇到该问题呢？
于是，我在其他页面尝试单个字符情况下，是否能居中，结果如下：
The minimum height consists of a minimum height above the baseline and a minimum depth below it, exactly as if each line box starts with a zero-width inline box with the element's font and line height properties. We call that imaginary box a "strut." (The name is inspired by TeX.).
以及在vertical-align段落中写道：
The following values only have meaning with respect to a parent inline element, or to the strut of a parent block container element.
简而言之，当只有一个字符时，浏览器会在文本前，设置一个 0 宽度的隐藏字符，作为对齐的参考。所以说，并不需要去手写一个字符来对齐。
这下，我凌乱了。。。
DOCTYPE 陷阱
冷静一下后，继续开始分析。发现，不同页面上，html 结构和 css 是完全一致的，但为什么实际样式会不一样呢？
再根据以上的理论分析，发现没有居中的原因，很可能是浏览器没有提供这样一个strut，作为参考。而这，并不符合 w3c 定义的规范。
想到这里，突然意识到了什么，在对比一下页面，发现了唯一一处不同点：
当 DOCTYPE 没有设置时，页面会进入 Quirks Mode，即怪异模式。
怪异模式是为了解决，css 规范出现后，保证遗留页面依然能够正常显示而制定的一种 HTML 文档类型。正是由于页面处于怪异模式，才并没有依照 w3c 规范的定义，使图标垂直居中。
赶紧添加
<!DOCTYPE html>，这下问题终于解决了。
总结
首先，对于垂直居中问题，利用line-height未必能实现，这个需要根据具体情况来分析，而分析的依据，正是 w3c 中的基本定义。由此可见，对于基础概念，不应当只停留在会用的阶段，还是需要完整的阅读一遍，理解透彻；
其次，对于排查问题，除了结合理论依据外，尝试做对比是一个很好的方式。通过对比，一步步排除不相关原因，最后就能挖出问题所在；
最后，在排查的过程中，决不能无凭无据预设条件。因为在这次，纠结了很久的一个原因，正是因为没有考虑到，页面的标准本身存在问题，而把时间花在寻找使用方式上是不是还存在未知错误。直到后来，一步步排除了之后，才锁定到了最终原因。
