vertical-align的垂直居中 上标下标 及line-height

1.近似垂直居中

        根据定义：元素垂直中心点和父级基线上1/2X-height对齐。例如<p><img src="images/meinv.jpg"></p>

p{line-height；200px;}img{vertical-align:middle;}

黄线为容器中心。红线为图片中心，把图片放大后 我们会发现图片并没有完全垂直居中，这是因为字符都有下沉特性，

这时候应该设置font-size=0，就使得元素字符中心线 底线    基线往上二分之一高度都在一条线上重合了。这样图片就能垂直居中了

2.vertical-align前提条件

vertical-align百分比是相当于行高line-height来计算的，为什么我们有时候写vertical-align：middle；却没有效果呢？因为它是有前提条件的！它只能适用于inline水平以及table-cell元素。（默认状态下，有图片，按钮，文字，单元格）行高太短，不够居中。display:table-cell属性指让标签以表格单元格的形式呈现，类似于td标签，我们都知道，单元格有一些比较特别的属性，例如元素的垂直居中对齐，关联伸缩等，所以display:table-cell还是有不少潜在的使用价值的与其他一些display属性类似，table-cell同样会被其他一些CSS属性破坏，例如float, position:absolute，所以，在使用display:table-cell与float:left或是position:absolute属性尽量不用同用。设置了display:table-cell的元素对宽度高度敏感，对margin值无反应，响应padding属性。

       下面看一段代码：div>span{display:table-cell; width:1em; height:1em; border:1px solid #beceeb;font-size:144px;text- align:center; vertical-align:middle;}

       div img{vertical-align:middle;}

   总结 ：三步

            

3.上标下标

vertical-align：super；提高盒子的基线到父级合适的上标基线位置；

vertical-align：sub；降低盒子的基线到父级合适的下标基线位置。