DIV局中

一水平居中
IE6&IE7：居中的div的父级元素中设置TEXT-ALIGN: center;即可实现此div居中
Firefox：在此居中的div中加上MARGIN-RIGHT: auto; MARGIN-LEFT: auto;或者margin: 0 auto;即可

二垂直居中
1. 固定高度
vertical-align:middle;表示行内垂直居中，将行距增加到和整个DIV一样高line-height:200px;
然后插入文字，就垂直居中了。
<html>
<head>
<style>
body{TEXT-ALIGN: center;}
#center{
MARGIN-RIGHT: auto;
MARGIN-LEFT: auto;
background:#F00;
400px;
vertical-align:middle;
height:200px;
line-height:200px;
}
</style>
</head>
<body>
<div id="center"><p>test content</p></div>
</body>
</html>
2. 未知高度
     尽管有CSS的vertical-align特性，但是并不能有效解决未知高度的垂直居中问题（在一个DIV标签里有未知高度的文本或图片的情况下）。
     a. 标准浏览器（如Firefox, Opera, Safari等）
        垂直居中，Firefox中可将父级元素显示方式设定为TABLE(display: table;) ，或内部子元素定为table-cell (display: table-cell),通过vertical-align特性使其垂直居中，但非标准浏览器是不支持的。
        <div style="display: table-cell; vertical-align: middle; height: 600px; 800px; border: 1px solid red;">
            <p>垂直居中，Firefox only</p>
            <p>垂直居中，Firefox only</p>
            <p>垂直居中，Firefox only</p>
        </div>
     b. 非标准浏览器
        IE6&IE7非标准浏览器中则需要借助css的特点实现垂直居中,只能在子元素里设距顶部50%，里面再套个元素距顶部-50% 来抵消。
         <div style="border: 1px solid red; height: 200px; position: relative;">
             <div style="position: absolute; top: 50%;">
                 <div style="position: relative; top: -50%;">
                     <p>垂直居中，IE6 only</p>
                     <p>垂直居中，IE6 only</p>
                     <p>垂直居中，IE6 only</p>
                 </div>
             </div>
        </div>
        c. 完美兼容解决方案
           <div style="border: 1px solid red; position: relative; height: 200px;display: table-cell; vertical-align: middle;">
             <div style="position: static !important; position: absolute; top: 50%;">
                 <div style="position: relative; top: -50%;">
                     <p>垂直居中，Firefox IE6 only</p>
                     <p>垂直居中，Firefox IE6 only</p>
                     <p>垂直居中，Firefox IE6 only</p>
                 </div>
             </div>
        </div>
        d. 另一种解决方案

CSS

以下是引用片段：
body {padding: 0; margin: 0;}
body,html{height: 100%;}
#outer {height: 100%; overflow: hidden; position: relative; 100%; background:ivory;}
#outer[id] {display: table; position: static;}
#middle {position: absolute; top: 50%;} /* for explorer only*/
#middle[id] {display: table-cell; vertical-align: middle; position: static;}
#inner {position: relative; top: -50%; 400px;margin: 0 auto;} /* for explorer only */
div.greenBorder {border: 1px solid green; background-color: ivory;}

xhtml

以下是引用片段：
<div id="outer">
  <div id="middle">
      <div id="inner" class="greenBorder">
      </div>
  </div>
</div>

以上CSS代码的优点是没有hacks，采用了IE不支持的CSS2选择器#value[id]。
CSS2选择器#value[id]相当于选择器#value，但是Internet Explorer不支持这种类型的选择器。同样地.value[class]，相当于.value,这些只有标准浏览器能读懂。

注意：
!important标记，Firefox & IE7支持!important标记，IE6忽略!important标记
在网页中的用法：
比如：在IE6中是蓝色，但是在Firefox & IE7中优先红色。 background-color:red !important;background-color:blue; 此属性必须在一行里面，不能换行。换行则失效。因为样式background-color只能定义一个，换行它默认background-color有多个定义。

其他元素居中

1、UL居中和li水平居中：

其实任何居中，只要是web元素，可加上id属性的都可以使用Div居中的方法。
只是要记住需把ul、li的宽度设置一下才，最好加个背景色才可以看出是否居中。
否则ul、li默认是一条撑满div，是看不出是否居中的。

2、image居中：
也可用上述Div方法，但我发现有时直接用最简单的<div align=center><img src=”xxx.jpg”></div>，维护起来更方便

body{BACKGROUND: url(http://image.99read.com/pic/smallbanner/li_5398_mid_080324112649.gif) #FFF no-repeat;}
body{TEXT-ALIGN: center;}