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(子类)

就可以实现垂直居中。