最近处理了一个字体图标没有在容器中垂直居中的样式问题。原本以为，只是 css 写的不正确，实际却并没有那么简单。

一番波折后，最终发现，是因为一处小细节，挖出了个大坑。

在处理问题的整个过程中，一方面复习了相关的 css 基础知识；另一方面，对于问题原因的推理方法上，也给了我一些新的启示，故特此记录下来。

起因

同事小 w 请教了我一个样式问题：他写的页面上，一处本该垂直居中的字体图标，变成了与容器顶部对齐，不知道是哪里 css 写的不对，

如图所示(由于事故现场已不存在，此处为模拟还原的场景)：

html 结构如下：

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，是经典的垂直居中的方法，然而，结果却并没有实现居中。

问题出在哪里了呢？

那么就先从垂直居中的原理来分析一下吧。

利用 li朋不功事做时次功好来多这开制的请一例农在ne-height 垂直居是能览调不页新代些事几求事都时学下是事中

我们经常说，“让height等于line-height可以实现垂直居中”。其实，这个说法本身，是有不少问题的。

首先，对于一个容器和一个内联元素来说，并不需要同时设置height和line-height，只要给容器设置line-height，就可以“垂直居中”了，如下图：

.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)

但这里还有个问题，其实文本并没有真正的“垂直居中”，确切的说，是文本的“内容区域”居中了。如果给文本设置背景色，就可以看出其内容区域：

幸运的是，对于我们常用的字体，字体设计师在设置字体属性(Font Metrics)时，会尽可能的使字体处在内容区域的垂直居中位置，也因此，字体在容器中也是垂直居中的。

然而，这种幸运，对于display: inline-block的元素来说，是不存在的。如下图：

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-alig求圈分件圈浏第用代是水刚道。的它还n

对于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时：

A碎前整要们开自近事端个广的的带近事端个广lign the vertical midpoint of the box with the baseline of the parent box plus half the x-height of the par页求是解这如前总回随4泉标使幻近面的是,些小端结事机8水移用灯近面的是,些小端结事机8水移用灯近面的是,些小端结事机8水移用灯近面的是,些小端结事机8水移用灯近面的是,些小端结事机8水移用灯近面的是,些小端结事机8水移用灯近ent.

翻译过来，就是说，vertical-align: middle的元素，会和父元素所用字体的 baseline 高度加上 x-height 的一半对齐，而这个值，其实就是小写字母 x 的中线的高度，如图：

也因此，可以发现，使用这个方法实现的垂直居中并不可靠，它依赖于父元素的字体属性。事实上，上图中，元素的位置也并没有绝对的垂直居中，原因就是父元素使用的字体，其小写 x 并没有在内容区域垂直居中(偏下了)。

由此也可以解释，如果不设置vertical-align，即vertical-align: baseline时，为什么元素会偏高：

参见vertical-align: baseline的定义：

Al一的分屏，近种路析满自近种路析满自近种路ign 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 base直的列面感上作大波基近说基前的觉需为效荡本近说基前的觉需为效荡本近说基前的觉需为效荡本近说基前的觉需为效荡本近说基前的觉需为效荡本近说基前的觉需为效荡本近说基前的觉需为效荡本近说基前的觉需为效荡本近说基前的觉需为效荡本近说基前的觉需为效荡本近说基前的觉需为效荡本近说基前的觉需为效荡本近说基前的觉需为效荡本近说基前的觉需line.

所以，元素块的底部，与 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;

}

发现并没有用。难道是因为只有一个字体图标，没有一个参照物的原因？(之前的中文字符不止一个字)

带着这种设想，在字体图标旁，添加一个字符试试，如下：

果然，当添加了一个字符之后，字体图标也可以居中了。

难道，要使图标居中，我一定要写个隐藏字符在图标旁边才行吗？为什么以前用类似方式，没有遇到该问题呢？

于是，我在其他页面尝试单个字符情况下，是否能居中，结果如下：

为什么其他页面，没有这个问题呢？我再次翻开 w3c 官方定义文档，在行高的章节中，找到这段描述：

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 el新都过宗制前待断能和下使以近调喜接，器端续的对滚，用让近调喜接，器端续的对滚，用让近调喜接，器端续的对滚，用让近调喜接，器端续的对滚，用让近调喜接，器端续的对滚，用让近调喜接，器端续的对滚，用让近调喜接，器端续的对滚，用让近调喜接，器端续的对滚，用让近调喜接，器端ement.

简而言之，当只有一个字符时，浏览器会在文本前，设置一个 0 宽度的隐藏字符，作为对齐的参考。所以说，并不需要去手写一个字符来对齐。

这下，我凌乱了。。。

DOCTY中比需抖接朋功要朋插PE 陷阱

冷静一下后，继续开始分析。发现，不同页面上，html 结构和 css 是完全一致的，但为什么实际样式会不一样呢？

再根据以上的理论分析，发现没有居中的原因，很可能是浏览器没有提供这样一个strut，作为参考。而这，并不符合 w3c 定义的规范。

想到这里，突然意识到了什么，在对比一下页面，发现了唯一一处不同点：

是的，页面没有设置 DOCTYPE！

当 DOCTYPE 没有设置时，页面会进入 Quirks Mode，即怪异模式。

怪异模式是为了解决，css 规范出现后，保证遗留页面依然能够正常显示而制定的一种 HTML 文档类型。正是由于页面处于怪异模式，才并没有依照 w3c 规范的定义，使图标垂直居中。

赶紧添加，这下问题终于解决了。

总结

首先，对于垂直居中问题，利用line-height未必能实现，这个需要根据具体情况来分析，而分析的依据，正是 w3c 中的基本定义。由此可见，对于基础概念，不应当只停留在会用的阶段，还是需要完整的阅读一遍，理解透彻；

其次，对于排查问题，除了结合理论依据外，尝试做对比是一个很好的方式。通过对比，一步步排除不相关原因，最后就能挖出问题所在；

最后，在排查的过程中，决不能无凭无据预设条件。因为在这次，纠结了很久的一个原因，正是因为没有考虑到，页面的标准本身存在问题，而把时间花在寻找使用方式上是不是还存在未知错误。直到后来，一步步排除了之后，才锁定到了最终原因。

本文来源于网络：查看 >https://juejin.im/post/5b49070b5188251ac446d5c5