body {TEXT-ALIGN: center}
#center { MARGIN-RIGHT: autoMARGIN-LEFT: auto}
说明：
首先在父级元素定义TEXT-ALIGN: center这个的意思就是在父级元素内的内容居中；对于IE这样设定就已经可以了。但在mozilla中不能居中。解决办法就是在子元素定义时候设定时再加上“MARGIN-RIGHT: autoMARGIN-LEFT: auto”
如果想用这个方法使整个页面要居中，不要套在一个DIV里，可以依次拆出多个div，只要在每个拆出的div里定义MARGIN-RIGHT: autoMARGIN-LEFT: auto就可以了。
如何使图片在DIV中垂直居中，用背景的方法。举例：
body{BACKGROUND: url(http://www.w3cn.org/style/001/logo_w3cn_194x79.gif) #FFF no-repeat center}
关键就是最后的center,这个参数定义图片的位置。还可以写成“top left”(左上角)或者"bottom right"等，也可以直接写数值"50 30"
效果如下：
如何使文本在DIV中垂直居中；
如果是文字，便不能用背景方法，可以用增高行距的办法变通实现垂直居中，完整代码如下：
<html>
<head>
<style>
body{TEXT-ALIGN: center}
#center{ MARGIN-RIGHT: auto
MARGIN-LEFT: auto
height:200px
background:#F00
width:400px
vertical-align:middle
line-height:200px
}
</style>
</head>
<body>
<div id="center"><p>test content</p></div>
</body>
</html>
说明：
vertical-align:middle表示行内垂直居中，将行距增加到和整个DIV一样高line-height:200px然后插入文字，就垂直居中了。
直接给你的BODY加一个CSS：文本居中。之后无论你建立一个层还是一个表格，它始终都是在页面中间显示。
这是一个最基本的CSS的运用，目前网页切图必不可少的工作就是在刚刚打开一个新的页面的时候给BODY赋一个CSS，除了居中之外，还有网页中显示量最大的字体、背景色等等。这是开始将一张效果图实现成具体网页的必须工作。
那么接下来就要根据你的需要给内容嵌套一个层或者一个表格了。我习惯上使用层，然后把网页里的所有的内容放在这个DIV里面，当然还是需要用CSS来控制它......事实上这是一种设计模式，更准确的说是我个人习惯的一种切图方式。
不同的人设计网页会用不同的方式，那么我们作为专业设计师会给自己一个比较符合标准和使用习惯，并且可以将误差降低到最小程度的设计思路，而切图工作则是其中的一个部分。它的重点在于实现，将效果图一分不差的实现在页面上，这个过程不需要太多的创意，不需要个性或者理念，它只需要一个习惯，或者说是一个合理的控制流程。也应该是网页设计当中一个最不可少也最为枯燥的过程了。
建议你找一个比较专业的设计师来带带你，这样可以在最短的时间内帮你养成一个好的切图习惯，它可以减少你工作当中大量的时间。
另外，多花点时间学习CSS但不要局限于它。
