先写上html代码，如图，内容很简单，就是一个div里有一段文本。
02再写上div对应的样式，如图，这里只设置了div的边框和高度，宽度。
03如果这里显示的话，我们看下页面，文本是不会水平居中和垂直居中的。
04要让文本水平居中，我们可以添加样式：text-align: center
要让文本垂直居中，我们可以添加样式： vertical-align: middle和display: table-cell
05添加完这几个样式后，刷新页面可以看到现在的文本已经可水平居中和垂直居中了。
根据问题描述有以下几种方式：
如果文本是固定字数且文本父级是固定高度 可用 vertical-align:middle
如果文本字数不是固定数，且文本父级层不是固定高度，可用 padding
如：padding：20px 0px这样文本距离层上下都是 20px，看着就垂直居中了。
下面的代码能使整个页面垂直居中，你根据你的实际情况稍作修改，应该能满足需求<?xml
version="1.0"
encoding="gb2312"?>
<!DOCTYPE
html
PUBLIC
"-//W3C//DTD
XHTML
1.0
Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html
xmlns="http://www.w3.org/1999/xhtml"
xml:lang="zh-CN"
lang="zh-CN">
<head>
<meta
http-equiv="Content-Type"
content="text/htmlcharset=gb2312"
/>
<meta
http-equiv="Content-Language"
content="zh-CN"
/>
<title>垂直居中</title>
<style
type="text/css">
body,
html
{
height:100%
}
#outer
{
height:100%
overflow:visible
position:relative
}
#outer[id]
{
display:table
position:static
}
#middle
{
position:absolute
top:50%
}
#middle[id]
{
display:table-cell
vertical-align:middle
position:static
}
#inner
{
position:relative
top:-50%
}
#inner[id]
{
position:static
}
</style>
</head>
<body>
<div
id="outer">
<div
id="middle">
<div
id="inner">
<p>******这个在IE中可以实现居中，在Firefox中也可以实现居中******</p>
</div>
</div>
</div>
</body>
</html>
