你说的文字居于底部是指浏览器底部么，如果是的话，需要用到CSS属性position，而position: fixed就是相对于浏览器进行定位的，让后用left, right, bottom, top这些坐标值来进行指定位置，底部就是bottom: 0，所以让文字垂直居底就像下面这个例子一样：
<!doctype html><html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#footer{
position: fixed
bottom: 0
width: 100%
text-align: center
}
</style>
</head>
<body>
<div id="footer">垂直居于底部的文字</div>
</body>
</html>
这个例子里还假设你是除了需要垂直居底以外，还需要居中设置，因此那个width:100%和text-align: center就是为了居中放置的，这种设置经常用在一个网站用于声明版权、网站地图这些，多看几个这样的网站源代码就会发现，它们都是这么做的。
此外，还有一个position: absolute，生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。元素的位置还是通过 "left", "top", "right" 以及 "bottom" 属性进行规定。你可以拿它来做到让某个元素处于一个区域比如某个div背景的底部，这时外面套的那个元素不能用默认的positon设定，需改成position: relative。例如：
<!doctype html><html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#container{
position: relative
width: 400px
height: 300px
margin: 20px auto
background-color: #de5
}
#innerFooter{
position: absolute
bottom: 0
width: 100%
text-align: center
}
</style>
</head>
<body>
<div id="container">
<div id="innerFooter">始终垂直居于块元素底部的文字</div>
</div>
</body>
</html>
<html><head>
<style type="text/css">
body, html
{
margin: 0 auto
padding: 0 auto
width: 100%
height: 100%
text-align: center
}
table
{
border-collapse: collapse
border: 1px solid #000
width: 200px
height: 200px
position: relative
text-align:center
}
.div1
{
position: absolute
left: 0
top: 0
font-size: 24pt
font-weight: bolder
}
.div2
{
position: absolute
right: 0
bottom: 0
font-size: 24pt
font-weight: bolder
}
.div3
{
position: absolute
left: 0
top: 0
font-size: 24pt
font-weight: bolder
}
.div4
{
position: absolute
left: 0
bottom: 0
font-size: 24pt
font-weight: bolder
}
</style>
</head>
<body>
<table>
<tr>
<td>
<div class="div1">
上
</div>
<div class="div2">
下
</div>
</td>
</tr>
</table>
<table>
<tr>
<td>
<div class="div3">
上
</div>
<div class="div4">
下
</div>
</td>
</tr>
</table>
</body>
</html>
要哪一种，自己选
position:fixedbottom:0这个方法简单好用。
运用这个CSS把DIV永远置于页面的底部 利用绝对定位，然后设置底部距离为0。
这个div如果位置在所有div的后面，那么只要前面的div 的高度够高的话，它的位置就会在页面的页面的底部的，一般想你这种说的要让他在页面底部的话都是页面高度太小，占不了满屏，导致页面底部部分下面有空白，你可以给这个div 前面的大的div 一个最小高度，让它撑起来。
<style>
.main{min-height: 700px}
</style>
<div class="header"></div>
<div class="main"></div>
<div class="footer"></div>
