vertical-align和baseline的关系

如何让一段文字居中，在人类看来如此简单的问题，在css界却变成了多年使人头疼的问题，关于居中的文字如汗牛充栋，但每到用时仍是会有问题。单单一个『中』是什么，在css里就有两种不一样的称呼：center和middle，水平居中要用center，垂直居中要用middle（到了css3时代引入了更多混乱，flex布局里垂直居中也能够用center了）。

水平居中相对简单，而垂直居中的问题若是没有透彻理解的话，即便这一次作出来了，下一次状况稍加不一样，又变得无所适从。

关于垂直居中，css中最基本的一个属性就是vertical-align，要了解vertical-align，首先要了解基线(baseline)，由于vertical-align的缺省值就是baseline。MDN的文档中只说了一句：baseline: 默认。元素放置在父元素的基线上。

那么这个父元素的基线究竟是个什么鬼？怎么才能决定父元素的基线在哪里呢？

先来看一个简单的例子：

<ul>
  <li class="container">
    <div class="aaa">
      aaa<br>bbb<br>ccc<br>ddd<br>eee<br>fff
    </div>
    <img src="https://www.google.com.hk/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png">
  </li>
</ul>

相关css:

.container {
  border: 1px solid green;
}
.container img {
  width: 300px;
  border: 1px solid red;
  vertical-align: baseline;
}
.aaa {
  display: inline-block;
  border: 1px solid red;
  vertical-align: baseline;
}

为了清楚起见，咱们给每个元素都加上边框，而且写明vertical-align: baseline，而后咱们来看一看效果：

注意最左侧那个黑点，咱们特地要留着它。在这里，能够很清楚地看到，当咱们指定vertical-align为baseline的时候，文字是贴着底边的，但图片并无贴底，而是位于最下面一行文字的中间。也就是说，对于图片来讲，所谓的『父元素的基线』其实指的是最下面一行文字的中间。

这是文字多的状况，那么文字少的状况呢？也是同样，图片的底边始终等于咱们最下面一行文字的中间：

如今咱们只改动一行代码，让img的vertical-align等于middle，这时候，诡异的状况发生了：

由于咱们最左侧的文字部分的vertical-align仍是baseline，而只有右边的img的vertical-align改为了middle，因此整个父元素的基线向上漂移了，如今文字部分依然对齐向上漂的父元素的基线，而图片是以本身的中线对齐父元素的基线，这就是middle的做用。

那若是咱们倒过来看一下，图片依然vertical-align: baseline，而文字vertical-align: middle呢？

不出所料，父元素的基线向上漂移，文字元素以本身的中间对齐父元素的基线，而图片以本身的下边缘对齐父元素的基线。

最后，咱们把文字和图片的vertical-align都设置为middle：

通常来说，这个才是咱们真正想要的结果。

因此结论是说，若是咱们想要在父级元素里对两个或更多行内元素作垂直居中的话，是须要分别给全部元素设置vertical-align: middle的，由于这个属性不能继承，因此在container上设置没有用，须要给每一个子元素设置。

感兴趣的同窗能够来个人Codepen里玩一玩，看看是否是这么回事。