html中垂直居中有几种?怎么实现?

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

}

单行文字（即文字较少，不够一行）重直居中比较好解决，使用行高和高度相等即可。如：.abc{height:100pxline-height:100px}

多行文本垂直居中分两种情况

1、div高度不固定，使用padding属性，将上下空相等的间距即可，如：.abc{height:autopadding:20px 10px/*上下各空20px,左右空10px*/}

2、div固定高度文字重直居中（这种情况比较常见，稍微复杂些），思路，将div转化表格属性，因为表格是可以实现垂直居中的。需要多添加一个div层,具体如下：

样式代码：

.waiceng{

height:400px

display:table

}

.liceng{

vertical-align:middle

display:table-cell

border:1px solid #FF0099

background-color:#FFCCFF

width:760px

}

源代码：

<div class="waiceng">

<div class="liceng">现在我们要使这段文字垂直居中显示</div>

</div>

声明：上面的代码IE6不支持。不过现在没几个人用IE6了，可以忽略了

---