1.利用line-height(只适用于float)
（注意：父元素不能设置高度和padding-top padding-bottom）
转自https://www.zfanw.com/blog/vertical-center-float-element.html
类似如下的 HTML 代码非常常见：
<h1>你好标题一<span><a href="#" title="查看更多">查看更多</a></span></h1>
这里，span
部分是右浮动的，字体也比较小，我们需要它与其他文本在垂直方向上对齐。
有几个办法很容易想到的办法：
给右浮动的 span 元素设置 padding-top 或 margin-top 值；
绝对定位右浮动的 span 元素
但这两种办法在我来看，动作都有些大。一个我认为清爽的做法是，给 span 元素设置 line-height 值。
假定如下 h1 样式：
h1{ font-size:18px; line-height:1.5;}
我们可以计算出，h1 的行框高度为 18*1.5=27px，这样，我们将 span 元素的 line-height 设置为27px，CSS 会扣除 span 的 font-size 值，并对半开后分别添加到 span 上/下空间里，
span{ float:right; font-size:12px; line-height:27px;}
这样就很轻松达到垂直方向上对齐文本的效果。
2.table
将元素放入table中
https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/table
