背景
最近自己写了一些前端代码，因为需要一个垂直居中对齐，于是就想到vertical-align ，但发现没有对齐，然后找了一下网上CSS代码实现垂直居中对齐，我研究了一下CSS代码，用到了vertical-align，我看了一些帮助文档和一些教程，我发现说太模糊了，有的说半天但还是没有说清楚vertical-align对齐怎么用，于是我自己写代码进行验证。
过程
根据 vertical-align - CSS：层叠样式表 | MDN (mozilla.org) 文档说明，大概能知道知识点
- vertical-align 只能针对inline 或者 inline-block或者table-cell，所以针对block无效，所以默认就是针对文字或者图片，而不是我们常用div，但我们希望Div垂直居中，所以要把div 设置inline-block。
- vertical-align top 和 bottom 对齐行的顶部和底部，这个是最容易理解，我们这个属性能用对，而且一般不会用错
- vertical-align: middle ，元素中线是与（父容器基线+x字母高度一半重合），这里多出来一个x高度，我第一次看不明白，但看文档就是这写，这个可能潜规则，因为html是国外的开发，所以他们字母对齐逻辑跟我们中文不一样，我们中文对齐基本都是底部，没有像q尾巴这样写法，这里知道就可以了
从上面总结得出来几点，你要理解div 垂直对齐还是出现各种起义，因为要需要其他知识点
不停调整对齐和每个div的高度，进行猜想与验证
<!DOCTYPE html>
<html>
<body>
<div style=" height: 500px; background-color: green;">
<label style="vertical-align: middle">qqqqxxxssss</label>
<span>headersssss</span>
<div
style="height: 500px; width: 100px; background-color: black; display: inline-block; vertical-align: baseline; color: brown;">
xxx</div>
<div
style="margin-top: 0px; height: 200px; width: 100px; background-color:darkblue; display: inline-block; vertical-align: middle; color: brown;">
xxxxx</div>
</div>
</body>
</html>难点问题：
- 父容器基线怎么确定，在line-height没有设置情况，子元素最高的元素会影响父容器基线，导致我开始根本不知道父容器基线在哪里
- inline-block 如果有内容基线最后一行文字为基线，这里说inline-block 里面的内容只是文字，其他情况，我还没有测试，只要知道这种情况就可以了，为了测试而已
结论
- line-height 确定情况，直接vertical-align：middle 就能居中对齐，但这种前提条件要指定高度，但对于无法规定高度就没有办法了，比喻都是百分比或者容器的高度是按照子元素高度决定就不行了
- line-height 不能固定情况，以子元素最高的元素来影响父容器对线，上面例子可以设置搞对，然后设置对齐，比喻最高的搞对div 对齐baseline ，就会按照这个子元素对齐，如果一个空的div inline-block他默认基线就是底部，如果你加一个字母，就会这个内容x 底部对齐，如果设置middle那么就子元素中部为基线，这样子真好是父容器的中部，这个时候所有元素对齐设置middle那么就会在中部对齐，一些前端界面库，垂直居中对齐就是创建一个幽灵元素div然后设置高度百分百，设置display：inlie-block，然后设置middle 垂直居中，然后其他元素居中对齐就会剧中了
简单一句话
不确定高度父容器的基线等于最高子元素的基线，子元素middle的话基线就是自己的中部，不受内容影响
基本这样子理解就可以了，vertical-align 不好理解原因是行高影响对齐，子元素又影响行高，这样子互相影响导致复杂度，估计实现html 这个属性都要写很多代码，起码要判断是否line-height是否确定，如果不确定只有计算完所有资源素才能计算line-height，然后才能确定对齐，然后才能更新坐标，然后进行渲染
同时我觉得以前vertical-align 最开始只是用来文字对齐，后面进行扩展支持inline-block导致逻辑有点混乱，没有提供一个单独快速子元素直接父容器居中，后面flex貌似很容易实现居中。所以感觉这些都是历史发展原因，但需求膨胀时候，如果直接在原来代码增加功能，还不与单独实现，以免出现起义，导致维护起来异常困难，最好界面库是浏览器，因为非常容易扩展，最乱界面库也是浏览器，因为扩展太随意了，导致隐藏的复杂度
补充
行高包含margin 影响，所以我们测试时候可能没有注意，感觉对齐不对的情况
看完可以看一下支付关于对齐问题，看你们是否可以答对
https://zhuanlan.zhihu.com/p/52441893
