html 文字垂直居中

单行文字（即文字较少，不够一行）重直居中比较好解决，使用行高和高度相等即可。如：.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了，可以忽略了

1、首先我们打开自己的电脑，找到已经安装好的Dreamweaver，新建一个html页面，并保存到桌面上。

2、然后我们在html的编辑窗口，编辑元素，使其中显示若干文字，我是用的div标签进行布局显示的。

3、其在浏览器中的显示效果如下图所示，我们可以很清晰的看到，文字明显的靠上靠左对齐。

4、接下来我们就需要为文字元素添加一定的对齐方式，首先我们让其居中对齐，即使用text-align:center

5、使用之后在浏览器中进行效果查看，可以很清楚的看到，文字相对于之前靠右对齐了。

6、我们可以从上一个图中看到，文字在垂直方向上还是不对齐的，接下来我们就需要为文字添加垂直对齐样式，line-height，我们需要将这一样式的大小设为文字外层元素的高度大小，这样便可正好垂直居中对齐了。

7、接下来我们刷新浏览器中的页面，查看效果，现在的文字已是垂直水平均居中的状态。

注意事项：line-height的值和height的值要相等。

---