html垂直居中有4中方法。
分别有：使用line-height；使用表格；利用display:table-cell；使用绝对定位。
具体实现方法：
使用line-height
把文字的line-height设为文字父容器的高度，适用于只有一行文字的情况。可以让文字在父元素内垂直居中。
使用表格
在IE6、7中我们可以使用vertival-align:middle来对表格里的元素进行垂直居中.
利用display:table-cell
对于那些不是表格的元素，我们可以通过display:table-cell 来把它模拟成一个表格单元格，这样就可以利用表格实现垂直居中了。
使用绝对定位实现
绝对定位进行居中的原理是通过把这个绝对定位元素的left或top的属性设为50%,这个时候元素并不是居中的，而是比居中的位置向右或向左偏了这个元素宽度或高度的一半的距离，所以需要使用一个负的margin-left或margin-top的值来把它拉回到居中的位置，这个负的margin值就取元素宽度或高度的一半。
注意：此法只适用于那些我们已经知道它们的宽度或高度的元素。否则margin负值的调整无法精确。
使文字在div中水平和垂直居中的的css样式为
text-align:center/*水平居中*/
line-height: 20px/*行距设为与div高度一致*/
示例如下：
HTML元素
<div>水平垂直居中</div>
css样式
div{
width:200pxheight:200px /*设置div的大小*/
border:1px solid green /*边框*/
text-align: center /*文字水平居中对齐*/
line-height: 200px /*设置文字行距等于div的高度*/
overflow:hidden
}
01先写上html代码，如图，内容很简单，就是一个div里有一段文本。
02再写上div对应的样式，如图，这里只设置了div的边框和高度，宽度。
03如果这里显示的话，我们看下页面，文本是不会水平居中和垂直居中的。
04要让文本水平居中，我们可以添加样式：text-align: center
要让文本垂直居中，我们可以添加样式： vertical-align: middle和display: table-cell
05添加完这几个样式后，刷新页面可以看到现在的文本已经可水平居中和垂直居中了。
