完全搞定vertical-align垂直居中不起做用疑难杂症

本来个人文章标题是深刻探讨line-height与vertical-align的疑难杂症，但这样彷佛没能针对性的抛出一个问题，故改为“完全搞定vertical-align垂直居中不起做用疑难杂症”。所以，本文讲解的仍是line-height和vertical-align。至于各类垂直居中的方法，网上包括掘金里已有很多文章介绍，本文仅讲解针对vertical-align对齐的方式。

本文全部例子的现象分析和解决思路均来自张鑫旭的博文《CSS深刻理解vertical-align和line-height的基友关系》。文章借助该博文附加上本身的理解后，配上一些概念描述和利于理解的辅助图整合而成。。

如下部分为正文：

在实际项目中，line-height和vertical-align是使用频率很是高的两个CSS属性。其中line-height用于指定文字的行高，vertical-align用于指定元素的垂直方向对其方式。可是，咱们经常在应用两个属性的过程当中，遇到许多预想不到的结果，好比使用vertical-align:middile不能实现垂直居中（vertical-align无效这个问题是高频提问的问题）。这两个属性关系很是密切，随时随地都存在它们共同做用的结果，要使用好这两个属性，只有深刻的理解了他们的做用机理，才能解决实际使用过程当中遇到的种种疑惑。

1、 几个概念

1. 行高: 两行文字基线之间的距离。
2. 基线: 英语字母中的概念，是指书写英语字母时，字母x底部所在的位置，即咱们用英语字母本子书写时从上往下，格子中的倒数第二条线。在CSS中值为baseline。如下图为行高，基线，以及vertical-align属性中，baseline,bottom,middle,top几个值的关系。

纠正：上图中的middle描述有错，正确应该为baseline往上二分之一x-height所在的位置，其中x-height指的是字母x的高度，关于x-height，具体你能够点击这里了解

3. 四种内联盒子

   在CSS中有四种内联盒子，分别是containing box, inline boxes, line box, content area。分别以下：

(1) containing box: 外层盒子模型,包含了其余的boxes

(2) line boxes: 由一个一个的inline boxes组成，一行即为一个line box，单个line box的高度由其包含的全部inline boxes中，高度最大的那个决定（由line-height起做用，后面解释），而一个一个的line box的高度就堆叠成了containing box的高度。

(3) inline boxes: 不会成块显示，而是并排显示在一行的boxes，如span,a,em等标签以及匿名inline boxes（即不含把标签的裸露的文字）。

(4) content area: 围绕文字看不见的box，其大小与font-size有关，其高度能够认为鼠标选中文字时背景色的高度(后面解释)。 如下为几种boxes的关系(图片中，粉红色为鼠标选中的文字部分)

<div>
 这里是一个div，里面包含了独立的文字，
 <span>span标签</span>
 <em>em标签</em>，
 以及其余的一些文字。
</div>
复制代码

理解四种box很是重要，平时的使用浮动，定位，父级高度自动撑开等表现都是与boxes的做用有很大的关系。

2、深刻理解行高line-height

1. line-height 与 line boxes的高度关系

   如今很多人认为，line boxes的高度是由内部文字撑开的，可是实际上并非文字撑开，而是由line-height来决定的。经过如下的比较，咱们能够证实这个结论。

<div class="div div1">我是一行文字大小为100px,可是line-height为0的文字</div>
<div class="div div2">我是一行文字大小为0,可是line-height为100px的文字</div>
<div class="div div3">我是一行文字大小和line-height都为100px的文字</div>
复制代码

.div {
  background: #f0f0f0;
  border:  1px solid #e0e0e0;
  margin: 10px;
}
.div1 {
  font-size: 16px;
  line-height: 0;
}
.div2 {
  font-size: 0;
  line-height: 100px;
}
.div3{
  font-size: 16px;
  line-height: 100px;
}
复制代码

结果表现为：
复制代码

结果显而易见，当文字的行高为0时，就算它的字号大小很大，line box的高度为0。相反，即便字体大小为0，但若是行高不会0，则会撑开标签的高度。同时，咱们发现，行高还有一个特性就是垂直居中性，不管line boxes的高度是多少，其里面的文字都是公用一条垂直居中线，利用这一个特性，咱们还能够实现一些近似的垂直居中效果。（为何近似，后面解释）。

2. 文本间距

   两行文本之间的间距为文本间距，在CSS中，文本上下的间距均为文本间距的一半，即经过设置行高后，行高与字体大小差值将等分于文本上下。设文本顶部和底部的间距为x，行高为y，字体大小为z，则知足： 2x + z = y.也就是 x = (y - z) / 2.这就是为何有时候咱们在设置样式的时候文本的大小大于行高，致使多行文本之间会重叠在一块儿的现象。

3. line-height值为1.5,150%和1.5em的区别

   咱们在给line-height赋值时，常常设置相似1.5,1.5em,150%的值。可是弄懂几个属性值的区别很是重要。line-height属性值具备继承性，即上级设置的属性值会在子级中继承。几个属性的区别在于1.5是在子级继承后会从新根据自身的字体大小从新计算行高值，而1.5em和150%则会在父级计算完行高值后，原封不动的做用于子级元素。看如下例子，能够形象的说明这一特色。

上图能够看到，当父级元素为的字体为16px，行高为150%（即16x150%=24px）时，最终行高24px将会被子元素继承，因为子元素的字体大小为40px，行高小于字体大小，根据上面第2点的公式咱们能够获得，两行文字之间的距离为2x = 24 - 40 = -16px，因此两行文字重叠在了一块儿；而当line-height为1.5时，因为子元素会根据自身字体的大小从新计算行高，即2x = (40 * 1.5) - 40 = 20px，获得两行文字之间的距离为20px，文本将不会重叠在一块儿。1.5em与150%同理。 所以，咱们在实际使用的过程当中，绝大部分场景应该尽可能的少用em和百分比值做为line-height的值，而使用1.5,2等不带单位的值替代。

3、深刻理解vertical-align

初学者使用vertical-align属性时，常常会发现最终的表现结果并不能如愿，“vertical-align无效”也是CSS问题里搜索频率比较高的一个。大部分是由于对于该属性理解不够透彻引发的，只有理解了该属性的特色，表现行为以及与其余属性（如line-height）的共同做用机制和效果，才能很好的解决vertical-align带来的一些问题，并有效的利用它。

1. 起做用的前提

   vertical-align起做用的前提是元素为inline水平元素或table-cell元素，包括span, img,input, button, td 以及经过display改变了显示水平为inline水平或者table-cell的元素。这也意味着，默认状况下，div, p等元素设置vertical-align无效。

2. 取值

   vertical-align能够有如下取值方式：

   （1）关键字： 如 top, middle, baseline(默认值), bottom, super, sub, text-bottom, text-top

   （2）长度值： 如10px，-10px(均为相对于baseline偏移)

   （3）百分比值： 如10%，根据line-height做为基数进行计算(重要)后的值。

3. 各类属性设置后的表现形式

   平时，咱们用得最多的应该是top,bottom,middle,baseline等几个关键字。而长度值等用得比较少。如下经过例子展现一下各个值的表现形式，并作解析。

以上全部外层标签的行高为50px,背景为灰色，全部的对齐方式为对图片进行设置,红色背景文字为图片的兄弟标签span,完整源码请看这里。经过观察咱们能够看到，各个属性值的表现以下：

（1）baseline： 默认的对齐方式，基线对齐，与父元素的基线对齐；

（2）top： 与行中的最高元素的顶端对齐，通常是父级元素的最顶端对齐；

（3）middle： 与父元素中线对齐（近似垂直居中）；

（4）bottom： 与top相反，与父级元素的最低端对齐 ；

（5）text-top： 与父级元素content area的顶端对齐，不受行高以及周边其余元素的影响。（如图，因为行高为50，但为了保证与content area顶部对齐，故图片上面有空隙，能够与top进行对比）；

（6）text-bottom： 与text-top相反，始终与父级元素content area的低端对齐。同理能够与bottom进行对比区分。注意，从图中能够看到，貌似该值的表现行为与baseline一致，但仔细观察，能够看到，实际上text-bottom所在的线会比baseline低一点。

（7）数值与百分比： 当数值为正值时，对齐方式将以基线为基准，往上偏移响应的大小，当为负值时，往下偏移。而百分比则是根据行高的大小，计算出响应的数值，再以数值表现的方式进行偏移。（百分比根据行高计算偏移值这一点很重要，对后面讲解的一些奇怪的现象能够作出解释并找到解决的办法）。

（8）super与sub： 这两个值均是找到合适的基线做为对齐的基线进行对齐，相似super标签和sub标签,但不缩放字体大小。

4、line-height与vertical-align的密切关系与应用

咋一看，咱们很难看到这两个属性之间的关系，可是实际上，这两个属性的关系很是密切，并且无处不在。引用张鑫旭的话讲就是“使人发指的断背基友关系”。咱们在处理内联元素的对齐，排列等，不少使人捉摸不透的奇怪现象都和vertical-align和line-height之间有很大的关系，基本上都能从它们身上找到缘由和解决办法。

1. 几个定义

   在讲两个属性之间的关系和应用以前，先来了解几个定义。

（1）inline-block基线： 在CSS2可视化格式模型文档中，指出了inline-block的基线是正常流中最后一个line box的基线，可是，若是这个line box里面没有inline boxes或者其overflow属性值不是visible，那么其基线就是margin bottom的边缘。什么意思呢？咱们用一张图片说明一下：

纠正：图片上面描述文字中的“红色线为设置了middle”改成“黄色线为设置了middle”

（2）middle对齐： 指元素的垂直中心线与父级基线往上二分之一X所在的位置的线对齐。有点绕，看下图：

（3）文字下沉特性： 文字是具备下沉特性的，就是文字的垂直中心点在文字所在区域的中线往下沉一点，不一样字体的文字下沉的幅度不一样，同时，文字大小越大，下沉越明显。如上图，X的中线点相对白色中线往下沉。

2. 几个现象

   咱们先经过例子来看看几个现象。

<div class="wrap">
  <img src="xxx.png" />
</div>
<div class="wrap">
  <span></span>
  <span>我有内容</span>
</div>
<div class="wrap" style="height:200px;">
  <img src="xxx.png" class="middle" />
</div>
复制代码

.wrap {
  background: #249ff1;
}
span {
  display: inline-block;
  width: 100px;
  height: 100px;
  border: 1px solid #f00;
}
img {
  width: 100px;
}
.middle {
  vertical-align: middle;
}
复制代码

以上代码最后结果以下:

咱们发现，放在div里面的图片，在底部会多出一点空白间隙，而第二个例子两个样式同样的span，一个有文字一个没有文字，咱们的意愿是想让两个span并排显示，但结果错位十分严重。至于第三个例子，图片设置了居中对齐，但彷佛没有生效。那究竟空白间隙从何而来？为何两个span会错位？图片确实是没有居中对齐吗？要解释清楚这个现象，必须弄清楚vertical-align和line-height之间的关系。咱们从第一个例子开始，一步一步的分析。

首先，经过前面两个属性的表现特色分析咱们知道，元素默认状况下的对齐方式是基线对齐，即baseline。而在浏览器中，都有默认的字体的大小，这个空隙就是来源于这两个。为了便于咱们观察，咱们把wrap的行高设置为一个相对大的值，在这里咱们设置为50px。设置后表现以下：

能够看到，此时图片底部的空白间隙变得更大。实际上，在wrap里面虽然只有一个img标签，但其实存在一个咱们看不见的空白节点。这个特殊的空白节点与普通文节点同样，具备文字大小，行高。所以，咱们能够利用普通文原本代替这个节点来观察现象。咱们在图片的后面输入一串XXX。以下：

接着，咱们再用一个inline-block化的span标签将文字包裹并设置文字背景色。以下：

通过以上两步改变，咱们发现，图片的位置没有发生任何的变化，底部的间隙大小也没有变化。此时，已经足以解释为何只有一个img标签的状况下，图片底部会出现间隙：因为空白节点的存在，图片后面至关于跟了一个文本节点。而默认状况下，图片的对齐方式是以父级元素的基线对齐，为了保持与基线对齐，图片底部必须留出间隙，大小为上面提到的半倍文本间距[即(line-height - font-size) / 2]。并且line-height的值越大，间隙将越大。到此为止，结合咱们上面对属性值特色的一些分析，要找到问题的解决办法就变得至关简单了。要去除图片底部的间隙，只须要将line-height和vetical-align属性的其中一个给干掉就能够了。能够有如下几种方法：

（1）将图片设置为display:block（利用vertical-align的生效前提）；

（2）将vertical-align设置为top，bottom，或者middle等值（利用属性值的表现行为）；

（3）将line-height设置为0（利用line-height为0时，基线上移）；

（4）将font-size设置为0 （若是line-height的值为相对值，如1.5）；

（5）将img设置浮动或者绝对定位（若是布局容许的话）
复制代码

如今，利用第二种方法，将vertical-align设置我bottom，设置后结果以下：

第二个例子，由前面的对于inline-block基线的定义可知，对于有内容的inline-block，其基线为最后一行文本基线所在的位置，而对于空白的inline-block，其基线为margin bottom边缘所在位置，即底部边缘。由于默认状况下为基线对齐，这两条基线对齐后就造成了上图那种错位的现象。知道了错位的缘由，要解决也方便了。咱们仅需将对齐方式设置为bottom，middle，top等值就能够了。如今设置为middle。效果以下：

至于第三个例子，有点让人摸不着头脑，这也是vertical-align无效被提问的最多的一种现象。按照vertical-align生效个条件可知，给img设置middle对齐后理论上应该是居中对齐才对，但为何没有起做用呢？是真的没有起做用吗？答案是：起做用了。实际上，vertical-align:middle是起做用的了，但至于最后图片为何没有在父级里面垂直居中，是由于后面的空白节点高度不足，致使基线偏上。按照中线的定义，中线也是偏上。咱们能够用一个字母x代替后面的空白节点，来观察现象。

从图中能够看到，实际上图片与文字确实是垂直居中对齐了。咱们给父级的行高设置为父级的高度，从而使基线往下偏移。效果以下：

此时，咱们能够看到，图片“近似”垂直居中在了父级元素。这是由于设置行高后，根据以前分析的line-height等于font-size+2倍的文字上下间距可知，父级基线往下。中线为基线往上二分之一x高度，此时图片的中线就与后面的x中线点对齐，实现了近似垂直居中的效果。

3. 应用

   利用空白节点这个特性，以及行高和vertical-align的关系，咱们能够作一些实际的应用。

   (1) 实现垂直居中

   因为空白节点存在，当咱们给外层标签设置一个较高的行高值时，因为行高的上下间距平分的性质，能够实现近似垂直居中的效果。此时，也不须要给父级标签设置具体的高度值（由于line-height会撑开父级）。

<div class="wrap">
  <img src="./images/xx.png" class="middle"/>
</div>
复制代码

.wrap {
  background: #249ff1;
  margin: 10px;
}
.wrap1 {
  line-height: 200px;
  text-align: center;
}
.middle {
  vertical-align:  middle;
}
复制代码

(2) 任意父级高度的垂直居中

在上面的提到的三种现象中，第三个例子，咱们给父级设置line-height的值等于height的值，实现了近似垂直居中的效果。那若是父级的高度是随着内容的变化而变化的怎么办？此时没法给父级设置一个特定的值，也不能使用百分比，由于line-height是根据字体的大小来计算的。换个角度想，空白节点咱们看不见，可是若是能够给它设置一个高度，让它与父级高度一致，就解决了这个问题。怎么给高度呢？答案是借助辅助元素，咱们能够在父级最后面增长一个inline-block化的span标签,高度为100%，font-size为0，接着让居中的元素居中对齐便可。

<div class="wrap" style="height:200px;text-align:center;">
  <img src="../../images/zhuyin.png" alt="" class="middle">
  <span style="display:inline-block;height:100%;vertical-align:middle;font-size:0;"></span>
</div>

复制代码

固然，这个span标签也能够经过伪元素的来实现

(3) 实现多图列表的两端对齐

在作相似商品列表的布局时，咱们时常须要每一行列表的实现两端对齐。实现的方法有不少，这里咱们用display:inline-block+辅助元素来实现。以下：

<ul>
  <li><img src="../../images/zhuyin.png"></li>
  <li><img src="../../images/zhuyin.png"></li>
  <li><img src="../../images/zhuyin.png"></li>
  <li><img src="../../images/zhuyin.png"></li>
  <li><img src="../../images/zhuyin.png"></li>
  <li><img src="../../images/zhuyin.png"></li>
  <li><img src="../../images/zhuyin.png"></li>
  <span class="fix"></span>
  <span class="fix"></span>
  <span class="fix"></span>
</ul>
复制代码

li{
  list-style-type: none;
  border:  1px solid red;
  display: inline-block;
  width: 28%;
  text-align: center;
}
.fix {
  display: inline-block;
  width: 28%;
  text-align: center;
}
ul {
  width:  720px;
  border:  1px solid #a7a7a7;
  text-align: justify;
  margin: 20px auto;
}
li img {
  width: 95%;
}
复制代码

结果以下：

每一个图片的下方会有一个空白，前面已经解释过空白的来源，咱们给ul设置line-height:0便可解决。效果以下：

去除了空白后，发如今最后一个图片的底部也有一个相对较大的空白，为何呢？来源于哪里？为了方便观察，咱们给每个span.fix增长一个边框，并在最后一个span.fix增长几个字母。结果以下：

从结果能够知道，最后一个span与文字节点的基线对齐。还记得前面说过的两个inline-block排列错位的例子吗？这就是和那个是同样的道理。因为前面一个span是没有inline boxes的节点，那么它的基线就是元素底部，加上默认状况下是基线对齐，从而空白的span将往下掉。那怎么办呢？一种方法改变基线的位置，另外一种方法是改变对齐的方式。改变基线的方式就是在空白的span里面加入内容，如空格。咱们把xxxx挪到span里面，结果以下：

发现此时，空白奇迹般的不见了。缘由正是咱们改变了基线的位置。同时因为设置了line-height为0，因此就对齐了。另外一种方法是改变对齐的方式，咱们设置为top，并去除全部的辅助线和字符，结果以下：

到此，完成了咱们的应用。

4. 为何是近似垂直居中

前面咱们屡次提到“近似垂直居中”这个词。为何是近似，而不是绝对呢？问题还得回到这张图。

当设置元素的对齐方式为middle时，指的是：元素的垂直中心线与父级元素基线的位置往上二分之一x高度所在线对齐。换句话说，就是图中的黄色线与红色字母x的中心处对齐。可是文字具备下沉特性，本来x的中心点应该与图中的白色线对齐，可是文字的下沉特性使字母往下掉了一点。从而致使黄色线没法绝对与白色线对齐。这个下沉的大小与文字的大小和字体有关。当文字大小足够小时，咱们能够忽略，近似的，白色线就与黄色线对齐，实现居中效果。可是文字大小很大时，就不能很好的实现了。咱们仍是以上面的例子：

<div class="wrap" style="height:200px;line-height:200px">
  <img src="../../images/zhuyin.png" class="middle">x
</div>
复制代码

img {
  width:  100px;
}
.wrap {
  background: #249ff1;
  margin: 10px;
}
.middle {
  vertical-align:  middle;
}
复制代码

当咱们设置line-height与height大小一直时，实现了垂直居中的效果。咱们借助画图工具往图中作一些辅助线。

结果显示，图片的中线（红色）并无与父级元素中线（橙色）彻底重合。因为字符下沉的大小与文字的大小有关系，咱们把父级的font-size设置为100px,结果以下:

此时能够明显的观察到，图片的上部空白比下部空白要大。其误差正好是文字下沉的误差。用图片工具作辅助线观察以下：

问题的根源找到了，那么有没有办法实现绝对居中呢？答案是有的。解决办法很明显，若是咱们让父级元素的各类线重合在一块儿，也就是font-size设置为0，就能够实现绝对居中了。给父级元素设置font-size:0,结果以下：

5、总结

要掌握完全line-height和vertical-align两个属性有不少细节须要去分析去发现，是有点难度的。可是咱们若是弄清楚了常见的几个特性和行为，就能避免实践的过程当中遇到的一些坑。从而提升工做效率。经过以上的一些分析，总结如下几点：

1. 理清line-height与height以前的关系；
2. 理清vertical-align不一样值的表现行为；
3. 理解四种内联盒子的关系；
4. 理解基线的定义，包括inline-block的基线定义；
5. 理解中线的定义，理清middle真正的表现方式；
6. 知道字符有下沉特性
7. 综合掌握vertical-align和line-height之间的关系。

关于这部分的内容先写到这里，我有新的补充或者其余人有问题的能够反馈给我，我整理后完善文章。另外我在掘金上的文章均会同步到个人github上面，内容会持续更新，若是你以为对你有帮助，谢谢给个star，若是有问题，欢迎提出交流。如下为同步文章的几个地址

1. 深刻讲解CSS的一些属性以及实践

2. Javscript相关以及一些工具/库开发思路和源码解读相关

本文扩展阅读： 字幕'x'在css世界中的角色和故事(张鑫旭)