css中的vertical-align的垂直居中对齐

先来看规范文档中对于vertical-align属性的定义及使用：

基线：就是英文小写字母x的下边缘。
常见的我们用于设置父元素内子元素（或子元素们）（为inline或inline-block）的对齐。

父元素为block，需设置line-height

如何实现子元素在父元素中居中（这里严格为垂直居中）？

• 若元素是img、input等inline-block元素（或还含有inline元素）。要想居中对齐，父元素可设置line-height属性，并且属性值和height值相同。所有子元素设置vertical-align:middle即可
• 若元素只为span等的inline元素。要想居中对齐，则父元素必须设置line-height属性，并且属性值和height值相同，此时，元素居中对齐父元素。子元素设置vertical-align为其他值是起作用，不过，要重新设置子元素的line-height。
  若父元素不设置line-height，子元素之间对齐，且对齐具有最大高度的子元素

父元素为inline-block，必须设置line-height。

-设置父元素的height与line-height值相同