今天做一个项目，需要让文字垂直居中，我已经习惯用div书写，所以没用表格，结果遇到了不大不小的问题。、
还好可以通过css来解决。
现在把常见的几种方法总结一下。
一、行高（line-height）法
如果要垂直居中的只有一行或几个文字，只要让文字的行高和容器的高度相同即可，比如：
<html> <head> <style type="text/css"> p{ height:30px; line-height:30px; width:100px; overflow:hidden; } </style> </head> <body> <p> 要居中的文字 </p> </body> </html>
二、内边距（padding）法
另一种方法和行高法很相似，它同样适合一行或几行文字垂直居中，原理就是利用padding将内容垂直居中，比如：
p{
padding:30px;
}
三、模拟表格法
模拟表格法其实就是用CSS中对元素的声明让块元素像表格一样显示，用到的CSS属性有display、vertical-align等。
看下面代码：
<div id="box"> <div id="center">居中的文字</div> </div>
让最外面名为box的Div呈表格样式显示，然后再让box中名为content的Div呈单元格显示，并利用vertical-align:middle让其垂直居中，这样就模拟出来和表格一样的显示方式，CSS代码如下：
#box{
height:400px;
display:table;
}
#center{
vertical-align:middle;
display:table-cell;
border:1px solid #FF0099;
background:#000;
400px;
}
但这种方法有一个弊端，由于IE浏览器对高度理解会产生错误，所以这种方法仅对Firefox有效，对IE无效，既然这样，我们就需要找出对IE的修正方法，于是有了另外一种方法。
四、定位法
顾名思义，定位法是利用CSS定位属性position对元素进行定位的方法，也属于模拟方法，不过它对IE的支持还是不错的。
它的Html代码为：
<div id="box"> <div id="wrap"> <div id="conter">垂直居中</div> </div> </div>
这段代码比上一种方法中多出了一个名为wrap的Div，它的作用是用来定位，原理就是：首先让box出于相对定位，wrap相对box出于相对定位，位于box垂直方向的50%，再让conter中的真正内容出于wrap垂直方向的-50%，从而制作出conter在box中垂直居中的效果，它们的CSS代码如下：
#box{
border:1px solid #000;
background:#F00;
400px;
height:400px;
position:relative;
}
#wrap {
position:absolute;
top:50%;
}
#conter {
border:1px solid #000;
position:relative;
top:-50%;
color:#FFF;
}
这段代码无论是在IE中还是Firefox中，都能正常居中了。
第四种方法是我自己目前用的方法，一般用第二种padding控制也能勉强达到要的效果。
回头如果看到其余的方法再总结进来。