java文字垂直居中_如何让div中的内容垂直居中

虽然Div布局已经基本上取代了表格布局，但表格布局和Div布局仍然各有千秋，互有长处。比如表格布局中的垂直居中就是Div布局的一大弱项，不过好在千变万化的CSS可以灵活运用，可以制作出准垂直居中效果，勉强过关。    要让div中的内容垂直居中，无非有以下几种方法，等我一一列举：

一、行高(line-height)法

如果要垂直居中的只有一行或几个文字，那它的制作最为简单，只要让文字的行高和容器的高度相同即可，比如：p { height:30px; line-height:30px; width:100px; overflow:hidden; }

这段代码可以达到让文字在段落中垂直居中的效果。

二、内边距(padding)法

另一种方法和行高法很相似，它同样适合一行或几行文字垂直居中，原理就是利用padding将内容垂直居中，比如：p { padding:30px; }

这段代码的效果和line-height法差不多。

三、定位法

顾名思义，定位法是利用CSS定位属性position对元素进行定位的方法，也属于模拟方法，不过它对IE的支持还是不错的。    它的Html代码为：

垂直居中

这段代码比上一种方法中多出了一个名为sub的Div，它的作用是用来定位，原理就是：首先让box出于相对定位，sub相对box出于相对定位，位于box垂直方向的50%，从而制作出content在box中垂直居中的效果，它们的CSS代码如下：

#box {

border:1px solid #000; background:#F00; width:400px; height:400px; position:relative;

}

#subwrap {

position:absolute; top:50%;

}

#content {

border:1px solid #000;color:#FFF;

}

dddd

这段代码无论是在IE中还是Firefox中，都能正常居中了。    当然，肯定还有许多垂直居中的方法，欢迎各位朋友交流补充。