css垂直居中的方法

一.line-height
1.概念：
line-height是指文本行基线直接的距离，而不是字体的大小，它确定了将各个元素框的高度增加多少或减少多少。
换句话说，line-height值和字体大小之差就是行间距，行间距平分成2部分，分别应用到内容区的顶部和底部，也叫半行距。
2.line-height的值。
初始值：normal
继承性：有
百分数：相对元素字体大小
计算值：对于长度和百分比是绝对值，否则根据指定确定

如果使用默认值normal，用户代理必须计算行间的垂直空间，不同的用户代理计算的值可能不同，但是一般是font-size的1.2倍。
em,ex,百分数都是相对于font-size的计算，以下的line-height值是一样的：
body{font-size:13px;}
c1{line-height:1.5em}
c2{line-height:1.5ex}
c3{line-height:150%}
c4{line-height:1.5}（后面讲解）

3.继承
当一个块级元素从另一个元素继承line-heigth时，要从父元素的font-size计算，而不是子元素。如下例子:

body{font-size:10px;}
div{line-height:1em;}
div p{font-size:18px;}
此时p的line-height是10px*1.2=12px;但是它的font-size是18px;     就会出现行和行挨的很近的情况，所以最好还是重新设置line-height，
一个好的办法是给它设置缩放因子，这样它就可以根据自己的font-size来计算line-height了。如：div {font-size:18px;line-height:1.5},缩放因子是
继承值而不是计算值，这样 p 元素就可以继承 line-height:1.5，计算后就是  18px*1.5 = 27px;

二.vertical-align
1.概念：
用于垂直对齐行内元素和替换元素文本和表单元格，注意它不能使块状元素的文本内容垂直对齐。该属性不能继承
2.值：
它的值有很多：baseline（默认值，底端对齐）,sub,super,top,text-top,middle,bottom,text-bottom。
3.作用：
vertical-align的作用是让行内元素的基线和父元素基线对齐，这里父元素的基线是指，父元素的文本基线，经常用于图像垂直居中对齐
在父元素的文本基线中。还有一个重要的作用是用于不固定高度的框的垂直居中，.利用display:table(父类)  display:table-cell； vertical:middle(子类) 
就可以实现垂直居中。