还是有点没懂为什么使用vertical-align：middle必须在父级元素上使用line-height？
vertical-align 对的中线是无替换元素 x 的中线位置，设置line-height 之后，x会在中间 ，x的中线也是在最中间，这样的话 元素的中部 就于x的中线对齐 也就垂直居中了
从定义上说，vertical-align: middle是当前元素的中心点与父元素基线往上1/2X高度对齐（一般理解的基线就是X的下边缘），如果父元素不设置行高或者行高设为0，父元素的高度没有撑开，那如何定位父元素基线的位置呢？一般来说，父元素设置行高，比如line-height: 100px，子内联元素设置vertical-align: middle，就可以实现内联元素的垂直居中效果。