垂直居中
设置line-height 等于height
line-height是一个长度，而不同于top，当font-size等于line-height时，行距 = line-height - font-size = 0；而当font-size大于line-height时，则会出现行距为负值，则两行重叠，也就是说，line-height是有必要空白的height(因为包括行距)。
在没有设置div的height属性时，div的高度根据line-height的大小而变化，且文字垂直居中。height = line-height时字体就会居中对齐。height>line-height时，字体上浮，可以理解为没有填充完，还有空位，height<line-height时字体下沉。
position：absolute +top:50%+ transform:translateY(-50%)
display:flex + align-items: center
display:table+display:table-cell + vertical-align: middle;
目前，在大多数开发环境中，已经基本不用table元素来做网页布局了，取而代之的是div+css，用DIV+CSS编写出来的文件k数比用table元素写出来的要小，table必须在页面完全加载后才显示，没有加载完毕前，table为一片空白，也就是说，需要页面完毕才显示，而div是逐行显示，不需要页面完全加载完毕，就可以一边加载一边显示
vertical-align是用来设置行内元素对齐方式的。说白了就是display属性值为inline、inline-block、inline-table另加一个table-cell的元素。行内元素，内联元素就是不会换行的，多与文字有关。
基线的位置并不是固定的：
在文本之类内联元素中，基线是字符x的下边缘位置
在像img元素中基线就是下边缘。
在inline-block元素中，也分两种情况
如果该元素中有内联元素，基线就是最后一行内联元素的基线。
如果该元素内没有内联元素或者overflow不是visible，其基线就是margin的地边缘。