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负值的调整无法精确。
打开电脑，找到已经安装好的Dreamweaver，新建一个html页面，并保存到桌面上。
在html的编辑窗口，编辑元素，使其中显示若干文字。
为文字元素添加一定的对齐方式，让其居中对齐。
添加垂直对齐样式，line-height，将这一样式的大小设为文字外层元素的高度大小，这样便可正好垂直居中对齐了。
使文字在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
}
