在html中怎么让文字垂直居中？

使文字在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

}

使文字在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

}

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负值的调整无法精确。

---