vertical-align在认识 vertical-align 属性之前，首先要了解几个基本的概念。值得注意的是：例

经常不生效的原因，让我们一步步揭开神秘的面纱

在认识 vertical-align 属性之前，首先要了解几个基本的概念。

基线：书写英语字母时，字母 X 底部所在的位置，可以了解下字母’x’在CSS世界中的角色和故事
行高( line-height )：两行文字基线之间的距离
内联盒子，更深入的理解可以参考 CSS盒子模型

值得注意的是：例如 float 和 position: absolute ，一旦设置了这两个属性之一，元素的 display 值被忽略，强制当成 block 方式处理，因此，vertical-align 也就失去了作用。

除 Inherit 继承之外，vertical-align 的属性值可以归为以下4类线类，如 Baseline、Top、Middle、Bottom ；

baseline 为 vertical-align 的默认值，其意思是指基线对齐
content-area 与line-height 无关；
content-area 即围绕文字看不见的 box，其大小与 font-size 有关，可以看成是鼠标选中文字后高亮的背景色区域；
line-height 是根据字体的大小来计算的

vertical-align： 1、正值表示由基线往上偏移，负值表示由基线往下偏移。 2、百分比则是基于 line-height 来计算的

需要注意的是：除了 top 与 bottom 是使元素相对于整行垂直对齐外，其他属性值都是相对于父元素。所以，在开发时，我们只需要关注当前元素和父级，两元素前后并没有直接影响。

实例

任意一个块级元素，里面若有图片，则块级元素高度基本上都要比图片的高度高

块级元素中包含图片

<div class="box">
 <img  src="./panda.jpg" />
</div>
<style>
.box {
  width: 300px;
  border: 1px solid #ddd;
}
img {
  width: 100px;
  height: 100px;
}
</style>

出现的现象是box比img高，产生这种现象的原因：

空白节点、line-height 和 vertical-align属性；
图片后放置空白节点X，会发现图片的基线是元素底部，与“空白节点”的基线对齐(由 inline-block 基线问题引起的)，那解决这种问题有以下几个方法：
（1）将图片设置为 display:block （利用 vertical-align 的生效前提，试过可通）
（2）将图片设置 vertical-align 设置为 top，bottom，或者 middle 等值（利用属性值的表现行为，试过可通）
（3）将 line-height 设置为 0 （利用 line-height 为 0 时，基线上移，试过可通）（4）将 font-size 设置为 0 （如果 line-height 的值为相对值，试过可通）
（5）将 img 设置浮动或者绝对定位（如果布局允许的话，试过可通）

主要原因在于文字具有下沉特性，从而导致蓝线无法绝对与红线对齐。当文字大小足够小时，我们可以忽略。从而近似的实现居中效果。但是文字越大，影响就越明显。

父级高度固定，文本内容高度不固定，对多行文字实现垂直居中

我们给父级设置 line-height 的值等于 height的值，是实现近似垂直居中的效果。

因为文字内容高度不固定，并且line-height 是根据字体的大小来计算的，并且百分比是根据line-height计算的，这个时候不能用line-height 的值等于 height 的值；不能对vertivcal-align使用百分比。

<ul>
  <li class="text-container">
    <span>我是单行文本我是单行文本</span>
  </li>
  <li class="text-container">
    <span>我是多行文本我是多行文本我是多行文本我是多行文本我是多行文本我是多行文本</span>
   </li>
 </ul>
<style>
  .text-container {
    height: 150px;
    text-align: center;
    vertical-align: middle;
  }
  .text-container:after {  //借助看不到的空白节点，让它与父级高度一致，在此借助伪元素，如果不加此样式，变成上面对齐
    content: "";
    display: inline-block;
    width: 0;
    height: 100%;
    vertical-align: middle;
  }
  span {
    vertical-align: middle;
    display: inline-block;
    max-width: 90%;
    max-height: 100px;
    overflow: hidden;
  }
</style>

#### 实现方式：
- 主体元素 inline-block 化
- 0 宽度 100% 高度的辅助元素（伪元素）
- vertical-align : middle

子元素垂直居中对齐

如果文字和图片不能垂直居中，可以设置父元素 font-size : 0, 因此此时content area高度是 0 ，各种乱七八糟的线都在高度为 0 的这条线上，绝对中心线和中线重合。

<div>
<img src="xxx"/>
<span>123</span>
</div>

div{
    font-size:0
}
img, span{
    vertical-align: middle;
    font-size:20ox;
}

参考链接： juejin.cn/post/684490…

以上学习得到以下场景解决办法：

块级元素中包含图片，图片和块级元素之间不出现空隙
父级高度固定，文本内容高度不固定，对多行文字实现垂直居
子元素垂直居中对齐

让我想到垂直居中的方式：

flex
vertical-align
absolute